/* Local Font Faces */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cairo-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cairo-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/cairo-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/fredoka-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/fredoka-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/fredoka-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-urdu-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/noto-urdu-700.ttf') format('truetype');
}

/* Custom variables for glossy plastic blocks */
:root {
  --border-color: #111;
  --border-width: 4px;
  --shadow-color: #111;

  /* Primary colors */
  --color-yellow: #FFCA28;
  --color-cyan: #00BCD4;
  --color-orange: #FF7043;
  --color-red: #EF5350;
  --color-green: #4CAF50;
  --color-white: #FFFFFF;
  --color-dark: #111111;
  --color-gold: #FFD700;
  --color-light-bg: #E0F7FA;

  --font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --transition-speed: 0.15s;
}

/* Language-specific professional fonts and overrides */
html[lang="ar"] {
  --font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[lang="ur"] {
  --font-family: 'Noto Nastaliq Urdu', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[lang="ur"] .speech-bubble-p,
html[lang="ur"] .story-text-content p {
  line-height: 2.2;
}

/* Base resets & Baseplate texture background */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-light-bg);
  background-image:
    radial-gradient(rgba(17, 17, 17, 0.08) 15%, transparent 15%),
    radial-gradient(rgba(17, 17, 17, 0.08) 15%, transparent 15%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  color: var(--color-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-x: hidden;
}

body.modal-open,
body.splash-open {
  overflow: hidden;
}


/* 3D Glossy Plastic Block Utility */
.plastic-block {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: 12px;
  position: relative;
  transition: transform var(--transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow var(--transition-speed) ease;
}

/* Glossy highlight overlays */
.plastic-block::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* Shadow types */
.shadow-dark {
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.5),
    inset -4px -4px 0 rgba(0, 0, 0, 0.25),
    6px 6px 0px var(--shadow-color);
}

/* Colors variants for plastic blocks */
.yellow-block { background-color: var(--color-yellow); }
.cyan-block { background-color: var(--color-cyan); }
.orange-block { background-color: var(--color-orange); }
.red-block { background-color: var(--color-red); }
.green-block { background-color: var(--color-green); color: var(--color-white); }
.white-block { background-color: var(--color-white); }

/* Block Click Micro-Animations */
button.plastic-block:active,
.panel-action-btn:active {
  transform: translate(4px, 4px);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.3),
    inset -4px -4px 0 rgba(0, 0, 0, 0.3),
    2px 2px 0px var(--shadow-color);
}

button.plastic-block:hover,
.panel-action-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.6),
    inset -4px -4px 0 rgba(0, 0, 0, 0.2),
    8px 8px 0px var(--shadow-color);
}

/* Toy Block Studs */
.panel-studs-row,
.banner-studs-row,
.footer-studs-row {
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: -12px;
  left: 10px;
  right: 10px;
  height: 12px;
  z-index: 3;
}

.panel-studs-row span,
.banner-studs-row span,
.footer-studs-row span {
  width: 24px;
  height: 12px;
  background-color: inherit;
  border: var(--border-width) solid var(--border-color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.4);
}

/* Top Navigation Bar */
.top-nav {
  position: relative;
  margin-bottom: 30px;
  padding: 15px 25px;
  z-index: 10;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* 3D Logo */
.logo-3d {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}

.logo-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white);
  border-radius: 8px;
}

/* Dropdown styling */
.language-dropdown,
.category-dropdown {
  padding: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  min-width: 150px;
}

.language-dropdown select,
.category-dropdown select {
  width: 100%;
  height: 100%; /* Explicitly occupy 100% height of parent container */
  box-sizing: border-box; /* Include padding inside bounds */
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  background: transparent;
  outline: none;
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-dark);
  z-index: 2;
}

/* Standard select arrow replacement */
.language-dropdown::after,
.category-dropdown::after {
  content: '▼';
  font-size: 0.75rem;
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Search Input Wrapper and input */
.search-input-wrapper {
  padding: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  min-width: 180px;
}

.search-input-wrapper input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  background: transparent;
  outline: none;
  padding: 8px 12px;
  color: var(--color-dark);
  border-radius: 8px;
}

.search-input-wrapper input::placeholder {
  color: #888;
  font-weight: 600;
}

/* Controls wrapper */
.nav-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

/* Dynamic Hidden Island Class */
.hidden-island {
  display: none !important;
}

/* Comic Banner Cover */
.comic-banner {
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 40px;
  color: var(--color-white);
}

.banner-title {
  font-size: 2.8rem;
  text-shadow: 3px 3px 0 var(--color-dark);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.banner-subtitle {
  font-size: 1.2rem;
  text-shadow: 2px 2px 0 var(--color-dark);
  font-weight: 600;
  opacity: 0.95;
}

/* Shiny reflection glass overlay */
.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50.1%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

/* Lock overlay for sequence panels */
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(2px);
  z-index: 5;
  transition: opacity 0.3s ease;
}

.lock-icon {
  font-size: 1.3rem;
  font-weight: 700;
  padding: 10px 20px;
  color: var(--color-white);
}

/* Action button style */
.panel-action-btn {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.panel-action-btn:disabled {
  background-color: #BDBDBD !important;
  color: #757575 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: inset 4px 4px 0 rgba(255,255,255,0.2), 3px 3px 0 var(--border-color) !important;
}

/* Footer styling */
.bottom-footer {
  margin-top: auto;
  padding: 25px;
  text-align: center;
}

.footer-text {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-dark);
}

/* RTL Dropdown Select arrow adjustments */
html[dir="rtl"] .language-dropdown select {
  padding: 8px 12px 8px 32px;
}



/* ---------------------------------------------------- */
/* Splash Screen Cinematic Lego Movie Opening Overlay */
/* ---------------------------------------------------- */
.splash-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-cyan);
  background-image:
    radial-gradient(rgba(17, 17, 17, 0.1) 18%, transparent 18%),
    radial-gradient(rgba(17, 17, 17, 0.1) 18%, transparent 18%);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow-y: auto;
}

.splash-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}



.splash-card {
  max-width: 500px;
  width: 100%;
  padding: 30px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow:
    inset 6px 6px 0 rgba(255, 255, 255, 0.5),
    inset -6px -6px 0 rgba(0, 0, 0, 0.25),
    10px 10px 0px var(--shadow-color);
}

.splash-logo-container {
  transform: scale(1.15);
  margin-top: 10px;
  animation: logoIntro 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes logoIntro {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.25) rotate(5deg);
  }
  100% {
    transform: scale(1.15) rotate(0deg);
    opacity: 1;
  }
}

.splash-scene-frame {
  width: 100%;
  height: 180px;
  border: var(--border-width) solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-color: #ddd;
}

.splash-scene-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.splash-card:hover .splash-scene-image {
  transform: scale(1.04);
}

.splash-subtitle {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
}

/* Cinematic snap animation on active start button */
#start-adventure-btn {
  font-size: 1.3rem;
  padding: 16px;
  animation: pulseButton 2s infinite alternate;
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.03);
  }
}

/* satisfying scale snap transition */
.snap-animating {
  animation: snapScale 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards !important;
}

@keyframes snapScale {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.85) rotate(-3deg);
  }
  100% {
    transform: scale(1.15) rotate(3deg);
  }
}

/* ---------------------------------------------------- */
/* Interactive Floating Level Selection Map Styles */
/* ---------------------------------------------------- */
.map-header-section {
  text-align: center;
  margin-bottom: 16px;
}

.map-title-label {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-dark);
  text-shadow: 2px 2px 0 var(--color-white);
}

.world-map-hub {
  background-color: #01579B;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.1) 16%, transparent 16%),
    radial-gradient(rgba(255, 255, 255, 0.1) 16%, transparent 16%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  border-radius: 20px;
  padding: 50px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  min-height: 400px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.15),
    inset -4px -4px 0 rgba(0, 0, 0, 0.3),
    8px 8px 0px var(--color-dark);
}

.ocean-baseplate-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 40%, rgba(1, 40, 72, 0.25) 100%);
  pointer-events: none;
}

/* Chunky floating level islands */
.world-island {
  width: 290px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  cursor: pointer;
  z-index: 5;
  animation: floatIsland 4s ease-in-out infinite alternate;
  text-decoration: none;
}

.world-island:nth-child(1) { animation-delay: 0s; }
.world-island:nth-child(2) { animation-delay: 0.8s; }
.world-island:nth-child(3) { animation-delay: 1.6s; }
.world-island:nth-child(4) { animation-delay: 2.4s; }
.world-island:nth-child(5) { animation-delay: 3.2s; }
.world-island:nth-child(6) { animation-delay: 1.2s; }
.world-island:nth-child(7) { animation-delay: 2.0s; }


@keyframes floatIsland {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-14px); }
}

/* Unlocked bounce effects */
.world-island:not(.locked):hover {
  animation-play-state: paused;
  transform: translateY(-22px) scale(1.04);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.6),
    inset -4px -4px 0 rgba(0, 0, 0, 0.2),
    12px 12px 0px var(--shadow-color);
}

/* Island visual containers */
.island-frame {
  height: 180px;
  position: relative;
  border: var(--border-width) solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #ddd;
}

/* 3D plastic number badge overlay */
.island-number-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 10;
  width: 32px;
  height: 32px;
  background-color: var(--color-white);
  border: 3px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-dark);
  box-shadow: 2px 2px 0 var(--border-color);
}

.island-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.world-island:not(.locked):hover .island-image {
  transform: scale(1.05);
}

.island-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.island-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
}

.concept-tag-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #000000; /* Set color explicitly to black */
  background-color: var(--color-white);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  padding: 2px 8px;
  align-self: center;
  box-shadow: 2px 2px 0 var(--border-color);
}

/* Grayscale locked formatting */
.world-island.locked {
  filter: grayscale(1) brightness(0.65);
  cursor: not-allowed;
  animation: none !important;
  transform: none !important;
}

.world-island.locked:hover {
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.5),
    inset -4px -4px 0 rgba(0, 0, 0, 0.25),
    6px 6px 0px var(--shadow-color) !important;
}

/* ---------------------------------------------------- */
/* Interactive Storytelling details modal Styles */
/* ---------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(3px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Builder credits card */
.builder-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: #FAFAFA;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  width: 100%;
}

.builder-logo {
  font-size: 1.15rem;
}

.builder-credit-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  margin: 0;
}

/* ---------------------------------------------------- */
/* Premium Comic Book Viewer Popup Styles */
/* ---------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(1, 40, 72, 0.45);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.comic-viewer-card {
  max-width: 620px;
  width: 100%;
  max-height: 92vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 24px 28px;
  position: relative;
  box-shadow:
    inset 6px 6px 0 rgba(255, 255, 255, 0.5),
    inset -6px -6px 0 rgba(0, 0, 0, 0.25),
    12px 12px 0px var(--shadow-color);
  border-radius: 20px;
}

/* Dedicated Standalone Reader Card */
.single-reader-card {
  width: 100%;
  max-width: 70%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 24px 28px;
  position: relative;
  box-shadow:
    inset 6px 6px 0 rgba(255, 255, 255, 0.5),
    inset -6px -6px 0 rgba(0, 0, 0, 0.25),
    6px 6px 0px var(--shadow-color);
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.single-reader-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  overflow-y: visible; /* Allow natural page scrolling */
  flex: 1 1 auto;
}

/* Responsive Two-Column Layout for single.html */
.single-layout-container {
  display: flex;
  flex-direction: row;
  gap: 60px;
  width: 100%;
  max-width: 100%; /* Wider to support sidebar */
  margin: 0 auto;
  padding: 0;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Sidebar Styling */
.single-sidebar-card {
  width: 30%;
  flex-shrink: 0;
  padding: 24px 20px;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow:
    inset 6px 6px 0 rgba(255, 255, 255, 0.4),
    inset -6px -6px 0 rgba(0, 0, 0, 0.25),
    6px 6px 0px var(--shadow-color);
}

.sidebar-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-white);
  border-bottom: 4px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 5px;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.25);
}

.sidebar-stories-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Sidebar Story Card Item */
.sidebar-story-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-dark);
      margin-bottom: 1rem;
  transition: transform var(--transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow var(--transition-speed) ease;
}

.sidebar-story-item:hover {
  transform: translateY(-3px) scale(1.02);
}

.sidebar-story-item:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.3),
    inset -4px -4px 0 rgba(0, 0, 0, 0.3),
    3px 3px 0px var(--shadow-color) !important;
}

.sidebar-story-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  text-align: start;
}

.sidebar-story-concept {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  align-self: flex-start;
  color: #000000;
}

/* Responsive Overrides */
@media (max-width: 950px) {
  .single-layout-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .single-sidebar-card {
    width: 100%;
    max-width: 100%;
  }
  .single-reader-card {
    width: 100%;
    max-width: 100%;
  }
}

/* Scrollable Content Wrapper */
.comic-viewer-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-inline-end: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Custom scrollbar for comic content wrapper */
.comic-viewer-content::-webkit-scrollbar {
  width: 10px;
}
.comic-viewer-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.comic-viewer-content::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border: 2px solid var(--color-yellow);
  border-radius: 10px;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--border-width) solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 4px;
  width: 100%;
}

.viewer-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-dark);
}

.share-btn {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 8px;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 10;
}

.share-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.share-btn:hover svg {
  transform: translateY(-2px);
}

/* Spring-loaded 3D closing button */
.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  background-color: var(--color-red);
  color: var(--color-white);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease, background-color 0.2s ease;
}

.close-btn:hover {
  transform: scale(1.15) rotate(90deg);
  background-color: #d32f2f;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.5),
    inset -4px -4px 0 rgba(0, 0, 0, 0.25),
    4px 4px 0px var(--shadow-color);
}

.close-btn:active {
  transform: scale(0.9) rotate(90deg);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.3),
    inset -2px -2px 0 rgba(0, 0, 0, 0.3),
    1px 1px 0px var(--shadow-color);
}

/* Cinematic Lego Movie Frame */
.frame-border-container {
  height: 310px;
  flex-shrink: 0; /* Prevent flex collapse due to long multi-paragraph story texts */
  border: var(--border-width) solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-0.6deg);
  box-shadow:
    inset 0 8px 24px rgba(0,0,0,0.35),
    inset 0 -8px 24px rgba(0,0,0,0.35),
    6px 6px 0px var(--shadow-color);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.frame-border-container:hover {
  transform: rotate(0.6deg) scale(1.02);
  box-shadow:
    inset 0 10px 30px rgba(0,0,0,0.4),
    inset 0 -10px 30px rgba(0,0,0,0.4),
    8px 8px 0px var(--shadow-color);
}

.frame-flush-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inline story illustrations as high-fidelity comic panels */
.story-inline-frame {
  height: 500px;
  width: 100%;
  border: var(--border-width) solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.3),
    4px 4px 0px var(--shadow-color);
  transition: transform 0.2s ease;
  margin: 12px 0;
  flex-shrink: 0; /* Prevent vertical collapse in scroll wrapper */
}

.story-inline-frame:hover {
  transform: scale(1.01);
}

/* Sidebar Story Frame and Image Preview */
.sidebar-story-frame {
  height: 120px;
  width: 100%;
  border: var(--border-width) solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.3),
    4px 4px 0px var(--shadow-color);
  transition: transform 0.2s ease;
  margin-bottom: 4px;
}

.sidebar-story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.sidebar-story-item:hover .sidebar-story-image {
  transform: scale(1.06);
}

/* Comic-book Speech Bubble Tail design */
.speech-bubble {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  margin-top: 18px;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.8),
    6px 6px 0px rgba(0, 0, 0, 0.15);
}

/* Triangluar Pointer Tail on Left (LTR) */
.speech-bubble::after {
  content: '';
  position: absolute;
  top: -24px;
  left: 45px;
  border-width: 0 18px 24px;
  border-style: solid;
  border-color: var(--border-color) transparent;
  display: block;
  width: 0;
  z-index: 1;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 48px;
  border-width: 0 15px 20px;
  border-style: solid;
  border-color: var(--color-white) transparent;
  display: block;
  width: 0;
  z-index: 2;
}

/* RTL Support - Mirror Speech Bubble Tail to Right */
html[dir="rtl"] .speech-bubble::after {
  left: auto;
  right: 45px;
}

html[dir="rtl"] .speech-bubble::before {
  left: auto;
  right: 48px;
}

/* Premium Typography for Story Content */
.story-text-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.speech-bubble-p {
  margin: 0;
  line-height: 1.65;
  font-size: 1.12rem;
  font-weight: 600;
  color: #111111;
  text-align: justify;
}

html[dir="rtl"] .speech-bubble-p {
  text-align: right;
  font-size: 1.25rem; /* Larger Arabic / Urdu font sizes for perfect legibility */
}

/* Responsiveness adjustments */
@media (max-width: 600px) {
  body {
    padding: 12px;
    padding-bottom: 90px !important; /* Ensure content is not hidden behind bottom nav */
  }

  .nav-container {
    flex-direction: column;
    /* align-items: stretch; */
    /* justify-content: space-between !important; */
    padding: 0;
    align-items: start;
  }

  .logo-3d {
    margin: 0 auto;
  }

  /* Premium Floating 3D Toy-Brick Bottom Navigation Bar */
  .nav-controls {
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background-color: var(--color-yellow);
    border: var(--border-width) solid var(--border-color);
    border-radius: 16px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    flex-wrap: nowrap !important;
    box-shadow:
      inset 4px 4px 0 rgba(255, 255, 255, 0.5),
      inset -4px -4px 0 rgba(0, 0, 0, 0.2),
      0 8px 24px rgba(0, 0, 0, 0.25);
  }

  /* Scale all bottom-nav components to share space nicely */
  .nav-controls > * {
    flex: 1 1 0%;
    min-width: 0;
    margin: 0 !important;
  }

  /* Make sure inputs, selects, and action links are highly uniform in height and alignment */
  .nav-controls select,
  .nav-controls input,
  .nav-controls .panel-action-btn {
    font-size: 0.8rem !important;
    padding: 6px 8px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
  }

  .nav-controls select {
    display: block !important;
  }

  .nav-controls .language-dropdown select,
  .nav-controls .category-dropdown select {
    padding-inline-end: 20px !important;
  }

  .nav-controls .language-dropdown::after,
  .nav-controls .category-dropdown::after {
    font-size: 0.55rem !important;
    inset-inline-end: 6px !important;
  }

  .banner-title {
    font-size: 2rem;
  }

  .world-map-hub {
    gap: 24px;
    padding: 32px 14px;
  }

  .world-island {
    width: 100%;
  }

  .comic-viewer-card {
    padding: 24px 16px 20px;
    gap: 16px;
    max-height: 96vh;
  }

  .single-reader-card {
    padding: 24px 16px 20px;
    gap: 16px;
    max-width: 100%;
  }

  .frame-border-container {
    height: 220px;
    flex-shrink: 0; /* Prevent flex collapse due to long text on mobile */
  }

  .story-inline-frame {
    height: 180px;
  }

  .speech-bubble {
    padding: 16px;
    margin-top: 14px;
  }

  .speech-bubble-p {
    font-size: 1rem;
  }

  html[dir="rtl"] .speech-bubble-p {
    font-size: 1.12rem;
  }

  /* Shift toast message higher on mobile to prevent overlapping bottom nav */
  .toy-toast {
    bottom: 84px !important;
  }
}

/* Toy brick block floating toast notification */
.toy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 100px);
  z-index: 9999;
  padding: 12px 24px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.toy-toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Dynamic Story Loading Animations */
.loading-bricks {
  animation: loadingPulse 1.2s ease-in-out infinite alternate;
  color: var(--color-dark);
  border: var(--border-width) solid var(--border-color);
  font-family: var(--font-family);
  font-size: 1.1rem;
}

@keyframes loadingPulse {
  0% { transform: scale(0.97); opacity: 0.8; }
  100% { transform: scale(1.02); opacity: 1; }
}

.error-bricks {
  border: var(--border-width) solid var(--border-color);
  font-family: var(--font-family);
  font-size: 1rem;
  box-shadow: 4px 4px 0px var(--color-dark);
}

/* Sleek "No Stories Found" card style */
.no-results-card {
  width: 100%;
  max-width: 450px;
  padding: 24px;
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: floatIsland 4s ease-in-out infinite alternate;
}

.no-results-card.hidden {
  display: none !important;
}

.no-results-text {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-white);
  margin-top: 10px;
  line-height: 1.5;
}

/* Solid studs color overrides to prevent hollow transparent loop bugs on light backgrounds */
.yellow-block .panel-studs-row span,
.yellow-block .banner-studs-row span,
.yellow-block .footer-studs-row span { background-color: var(--color-yellow) !important; }

.cyan-block .panel-studs-row span,
.cyan-block .banner-studs-row span,
.cyan-block .footer-studs-row span { background-color: var(--color-cyan) !important; }

.orange-block .panel-studs-row span,
.orange-block .banner-studs-row span,
.orange-block .footer-studs-row span { background-color: var(--color-orange) !important; }

.red-block .panel-studs-row span,
.red-block .banner-studs-row span,
.red-block .footer-studs-row span { background-color: var(--color-red) !important; }

.green-block .panel-studs-row span,
.green-block .banner-studs-row span,
.green-block .footer-studs-row span { background-color: var(--color-green) !important; }

.white-block .panel-studs-row span,
.white-block .banner-studs-row span,
.white-block .footer-studs-row span { background-color: var(--color-white) !important; }

/* ---------------------------------------------------- */
/* Glossy 3D Block Pagination Controls Styles           */
/* ---------------------------------------------------- */
.pagination-controls {
  margin-top: 40px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
  z-index: 10;
}

.page-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.page-btn.active-page {
  color: var(--color-white) !important;
  pointer-events: none;
}

.page-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.25),
    inset -3px -3px 0 rgba(0, 0, 0, 0.15),
    3px 3px 0px var(--shadow-color) !important;
}

/* ---------------------------------------------------- */
/* Notification Bell Styles                             */
/* ---------------------------------------------------- */
.notif-bell-container {
  position: relative;
  display: inline-block;
}

.notif-bell-btn {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease;
  padding: 0;
  color: var(--color-dark);
}

.notif-bell-btn svg {
  width: 20px;
  height: 20px;
}

/* Red Lego-stud styled "new" badge */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background-color: var(--color-red);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6);
  animation: pulseBadge 1.5s infinite alternate ease-in-out;
}

.notif-badge.hidden {
  display: none !important;
}

@keyframes pulseBadge {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

/* Notification Dropdown Container */
.notif-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  background-color: var(--color-yellow);
  border: var(--border-width) solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  z-index: 2000;
  display: none;
  animation: slideDownNotif 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: 6px 6px 0px var(--shadow-color);
}

.notif-dropdown.show {
  display: block;
}

@keyframes slideDownNotif {
  0% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.notif-dropdown-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 10px 0 10px 0;
  color: var(--color-dark);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 6px;
  text-align: center;
}

.notif-stories-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
}

.notif-story-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color-white);
  border: 1.5px solid var(--border-color);
  text-decoration: none;
  color: var(--color-dark);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.notif-story-item:hover {
  background-color: #f7eded;
}

.notif-story-img {
  width: 45px;
  height: 45px;
  border-radius: 6px;
  border: 1.5px solid var(--border-color);
  object-fit: cover;
}

.notif-story-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.notif-story-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-story-date {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.7rem;
  color: #777;
  margin-top: 2px;
}

.notif-empty {
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #777;
}

/* RTL Support for dropdown positioning */
html[dir="rtl"] .notif-dropdown {
  right: auto;
  left: 0;
}

@media (max-width: 600px) {
  .notif-bell-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;
    z-index: 1100;
  }

  html[dir="rtl"] .notif-bell-container {
    right: auto;
    left: 25px;
  }

  .notif-dropdown {
    top: 50px;
    bottom: auto;
    right: 0;
    left: auto;
    width: 280px;
  }

  html[dir="rtl"] .notif-dropdown {
    left: 0;
    right: auto;
  }
}

@media (min-width: 601px) {
  .notif-bell-container {
    margin-left: auto;
    margin-right: 15px;
  }

  html[dir="rtl"] .notif-bell-container {
    margin-right: auto;
    margin-left: 15px;
  }
}

/* Category Chips Styles */
.category-chips-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 25px;
  gap: 12px;

}

.category-chip {
  transition: transform 0.1s ease, background-color 0.15s ease;
  border-radius: 20px !important;
  font-size: 0.9rem;
  padding: 8px 16px;
  border: 2px solid var(--border-color);
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: inherit;
}

.category-chip:active {
  transform: scale(0.95);
}

.sidebar-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Preloader bounce animation */
@keyframes bounceLoader {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-15px) scale(1.02); }
}

/* Disable selection and touch callouts on mobile screen sizes */
@media (max-width: 768px) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}