/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Cinzel","arguments":[{"subsets":["latin"],"weight":["400","700"],"variable":"--font-cinzel","display":"swap"}],"variableName":"cinzel"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Cinzel_98406a';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b497598118275079-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Cinzel_98406a';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a273567b21a7c318-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Cinzel_98406a';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b497598118275079-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Cinzel_98406a';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a273567b21a7c318-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Cinzel_Fallback_98406a';src: local("Times New Roman");ascent-override: 71.31%;descent-override: 27.18%;line-gap-override: 0.00%;size-adjust: 136.86%
}.__className_98406a {font-family: '__Cinzel_98406a', '__Cinzel_Fallback_98406a';font-style: normal
}.__variable_98406a {--font-cinzel: '__Cinzel_98406a', '__Cinzel_Fallback_98406a'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Lato","arguments":[{"subsets":["latin"],"weight":["400","700"],"variable":"--font-lato","display":"swap"}],"variableName":"lato"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Lato_47a102';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/cce080f35d014443-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Lato_47a102';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/4de1fea1a954a5b6-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Lato_47a102';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/39969fcf98a3026e-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Lato_47a102';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6d664cce900333ee-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Lato_Fallback_47a102';src: local("Arial");ascent-override: 101.03%;descent-override: 21.80%;line-gap-override: 0.00%;size-adjust: 97.69%
}.__className_47a102 {font-family: '__Lato_47a102', '__Lato_Fallback_47a102';font-style: normal
}.__variable_47a102 {--font-lato: '__Lato_47a102', '__Lato_Fallback_47a102'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*
==========================================================================
  1. GLOBAL STYLES
==========================================================================
*/

/* Basic Reset & Defaults */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Body & Main Layout */
body {
  font-family: var(--font-lato), sans-serif;
  line-height: 1.6;
  background-color: #1a1a1a;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  padding: 0 0 2rem 0;
}

.container {
  max-width: 1300px;
  margin: auto;
  padding: 0 20px;
}

/* Typography & Links */
h1, h2, h3 {
  font-family: var(--font-cinzel), serif;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 0.5em;
  color: #f5f5f5;
}

main h2 {
  font-size: 2rem;
  color: #f5f5f5;
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
}

a { text-decoration: none; color: #ff6b6b; }
a:hover { color: #ff4500; text-decoration: underline; }

/*
==========================================================================
  2. LAYOUT COMPONENTS (Header, Footer)
==========================================================================
*/

/* Header */
header {
  background-color: #1a1a1a;
  color: #fff;
  padding: 1.5rem 0;
  position: relative;
}
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo { position: relative; z-index: 1001; }
.logo a { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.desktop-logo { display: none; }
.mobile-logo { display: block; height: 40px; width: auto; }
.logo-text {
  display: block; font-family: var(--font-cinzel), serif; color: white;
  font-size: 1.3rem; font-weight: 400; letter-spacing: 1px;
}
.mobile-menu-toggle { display: block; background: none; border: none; cursor: pointer; z-index: 1001; }
.header-nav-container {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(26, 26, 26, 0.98);
  flex-direction: column; justify-content: center; align-items: center;
  gap: 2rem; z-index: 1000;
}
.header-nav-container.is-open { display: flex; }
header nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
header nav a {
  color: #e0e0e0; font-family: var(--font-cinzel), serif; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease;
}
@media (min-width: 992px) {
  header { padding: 2rem 0 1rem 0; }
  .logo { z-index: auto; }
  .desktop-logo { display: block; height: 50px; width: auto; }
  .mobile-logo, .logo-text { display: none; }
  .mobile-menu-toggle { display: none; }
  .header-nav-container {
    display: flex; position: static; height: auto; width: auto; background-color: transparent;
    flex-direction: row; justify-content: flex-end; align-items: center; flex-grow: 1; gap: 0;
  }
  header nav { flex-direction: row; gap: 0; flex-grow: 1; justify-content: center; }
  header nav a {
    margin: 0 15px; font-size: 1rem; display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  header nav a:hover { color: #DB2716; text-decoration: none; transform: scale(1.1); }
}
.support-button .cta-button {
  display: inline-block; background-color: #4a4a4a; color: #e0e0e0;
  padding: 0.6em 1.5em; border-radius: 8px; font-family: var(--font-cinzel), serif;
  font-weight: 700; font-size: 1rem; border: 1px solid #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: background-color 0.3s ease;
}
.support-button .cta-button:hover { background-color: #5a5a5a; text-decoration: none; color: #fff; }

/* Footer */
footer {
  background-color: #1a1a1a;
  color: #aaa; 
  text-align: center;
  padding: 1rem 0; 
  margin-top: auto; 
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
==========================================================================
  3. HOMEPAGE SECTIONS
==========================================================================
*/

/* Section 1: Hero Header */
.hero-header {
  position: relative; height: 80vh; min-height: 500px; max-height: 700px; width: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  margin-top: 2rem;
}
.hero-header__background-image { object-fit: cover; z-index: 1; }
.hero-header__overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.9) 80%); z-index: 2;
}
.hero-header__content { position: relative; z-index: 3; }
.hero-header__headline { font-size: 3rem; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 0.5rem; }
.hero-header__subheadline { font-size: 1.2rem; color: #ccc; margin-bottom: 2rem; }
.hero-header__cta {
  display: inline-block; background: #DB2716; color: white; padding: 1rem 3rem;
  border-radius: 8px; font-family: var(--font-cinzel), serif; font-weight: 700;
  font-size: 1.2rem; text-transform: uppercase;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.hero-header__cta:hover { background-color: #ff4500; transform: scale(1.05); text-decoration: none; color: white; }
@media (min-width: 768px) {
  .hero-header__headline { font-size: 4.5rem; }
  .hero-header__subheadline { font-size: 1.5rem; }
}

/* Section 2: Explore Our Worlds */
.explore-worlds {
  padding: 4rem 0;
  background-color: #252525;
}
.explore-worlds__grid {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.explore-worlds__showcase {
  text-align: center;
}
.explore-worlds__showcase h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.explore-worlds__showcase-desc-wrapper {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem auto;
}
.explore-worlds__showcase-desc {
  color: #bbb;
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.7;
}
.explore-worlds__showcase-desc:last-child {
  margin-bottom: 0;
}
.explore-worlds__comic-grid,
.explore-worlds__story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}
.explore-worlds__game-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}
.explore-worlds__image-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.explore-worlds__image-link:hover {
  transform: scale(1.03);
}
.explore-worlds__image-link img {
  width: 100%;
  height: auto;
  display: block;
}
.explore-worlds__view-more-btn {
  display: inline-block;
  border: none;
  background-color: #4a4a4a;
  color: #fff;
  padding: 0.8em 1.5em;
  border-radius: 5px;
  font-family: var(--font-cinzel), serif;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.2s ease;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
}
.explore-worlds__view-more-btn:hover {
  background-color: #5a5a5a;
  text-decoration: none;
  transform: scale(1.05);
}
@media (min-width: 992px) {
  .explore-worlds__comic-grid,
  .explore-worlds__story-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .explore-worlds__game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Styles for the BonusContentScroller */
.bonus-scroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  margin-bottom: 2rem;
  scrollbar-width: none;
}

.bonus-scroller::-webkit-scrollbar {
  display: none;
}

.bonus-scroller__track {
  display: flex;
  flex-direction: row;
  width: -moz-fit-content;
  width: fit-content;
}

.bonus-scroller__item {
  flex-shrink: 0;
  width: 90vw;
  max-width: 375px;
  aspect-ratio: 16 / 9;
  margin: 0 0.5rem;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.bonus-scroller__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bonus-scroller__item:hover {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .bonus-scroller__item {
    width: 375px;
    margin: 0 0.75rem;
  }
}

/* Section 3: AI Chat Hook */
.ai-chat-hook { padding: 4rem 0; }
.ai-chat-hook h2 { margin-bottom: 1.5rem; }
.ai-chat-hook__description {
  text-align: center;
  color: #bbb;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  line-height: 1.7;
}
.ai-chat-hook__description p:not(:last-child) {
  margin-bottom: 1em;
}
.ai-chat-hook__iframe-container {
  position: relative; width: 100%; overflow: hidden;
  /* Mobile-first: default to a taller aspect ratio. 150% is 2:3 */
  padding-top: 150%;
  border: 1px solid #444; border-radius: 8px;
  margin-bottom: 3rem;
  z-index: 10;
}
.ai-chat-hook__iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
.ai-chat-hook__cta {
  display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto; background: #DB2716; color: white;
  padding: 0.8em 2.5em; border-radius: 8px; font-family: var(--font-cinzel), serif;
  font-weight: 700; font-size: 1.1rem;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.ai-chat-hook__cta:hover { background-color: #ff4500; transform: scale(1.05); text-decoration: none; color: white; }

@media (min-width: 768px) {
  .ai-chat-hook__iframe-container {
    padding-top: 56.25%; /* Revert to 16:9 for desktop */
  }
}

/* Section 4: Why Subscribe? */
.why-subscribe { padding: 4rem 0; background-color: #252525; }
.why-subscribe h2 { margin-bottom: 3rem; }
.why-subscribe__grid { display: grid; grid-gap: 2rem; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 3rem; }
.why-subscribe__card { text-align: center; }
.why-subscribe__card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.why-subscribe__card p { color: #bbb; max-width: 300px; margin: 0 auto; }
.why-subscribe__cta {
  display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto; background: #DB2716; color: white;
  padding: 1rem 3rem; border-radius: 8px; font-family: var(--font-cinzel), serif;
  font-weight: 700; font-size: 1.2rem; text-transform: uppercase;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.why-subscribe__cta:hover { background-color: #ff4500; transform: scale(1.05); text-decoration: none; color: white; }
@media (min-width: 768px) { .why-subscribe__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .why-subscribe__grid { grid-template-columns: repeat(4, 1fr); } }

/* Styles for the AnimatedBenefitIcon component */
.animated-icon-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  margin-bottom: 1rem;
  cursor: pointer;
  perspective: 800px;
}
.animated-icon__icon {
  color: #DB2716;
  position: relative;
  z-index: 2;
}
.animated-icon__icon svg {
  width: 2.8rem;
  height: 2.8rem;
}
.animated-icon__shadow {
  position: absolute;
  bottom: 15px;
  width: 40px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  filter: blur(4px);
  z-index: 1;
}

/*
==========================================================================
  4. OTHER PAGE-SPECIFIC STYLES
==========================================================================
*/

.breadcrumbs { padding: 1.5rem 0; font-size: 0.9rem; color: #aaa; }
.breadcrumbs a { color: #aaa; text-decoration: none; transition: color 0.2s ease; }
.breadcrumbs a:hover { color: #fff; text-decoration: none; }
.breadcrumbs .separator { margin: 0 0.75em; }
.breadcrumbs .active { color: #fff; font-weight: bold; }
hr.section-divider { border: none; border-top: 1px solid #444; margin: 4rem auto; width: 80%; }
.archive-header { text-align: center; margin-bottom: 3rem; padding-top: 2rem; }
.archive-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; text-transform: uppercase; }
.archive-header p { font-size: 1.1rem; color: #bbb; max-width: 600px; margin: 0 auto; }
.list-item__image-container, .game-chapter-card__image-container, .bonus-content-card { position: relative; overflow: hidden; }
.patreon-exclusive-badge {
  position: absolute; top: 10px; right: 10px; background-color: rgba(219, 39, 22, 0.9);
  color: #fff; padding: 0.3em 0.7em; border-radius: 4px; font-size: 0.75rem;
  font-weight: bold; display: flex; align-items: center; gap: 0.4em;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.patreon-exclusive-badge span { line-height: 1; }
.comic-list { display: flex; flex-direction: column; gap: 2rem; max-width: 900px; margin: 0 auto; }
.comic-list-item { background-color: #252525; border: 1px solid #444; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.comic-list-item__content { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; text-align: center; flex-grow: 1; }
.comic-list-item__title { font-size: 1.5rem; margin-bottom: 0.25rem; color: #f5f5f5; }
.comic-list-item__excerpt { color: #bbb; margin-bottom: 1.5rem; font-style: italic; }
.comic-list-item__overview { color: #ddd; margin-bottom: 0; }
.story-list-item__preview { position: relative; max-height: 120px; overflow: hidden; flex-grow: 1; color: #bbb; font-size: 0.9em; margin-bottom: 1.5rem; text-align: left; }
.story-list-item__preview p { margin-bottom: 1em; }
.story-list-item__preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70%; background: linear-gradient(to bottom, transparent, #252525); }
.comic-list-item__button { display: inline-block; align-self: center; margin-top: 1.5rem; background: #d11a2a; color: white; padding: 0.6em 1.5em; border-radius: 5px; text-decoration: none; font-family: var(--font-cinzel), serif; font-weight: 700; font-size: 0.9rem; transition: transform 0.2s ease; }
.comic-list-item__button:hover { transform: scale(1.05); color: white; text-decoration: none; }
.list-item__image-container {
  position: relative;
  width: 100%;
}
.list-item__image-container img {
  display: block;
}
@media (min-width: 768px) { 
  .comic-list-item { 
    flex-direction: row; 
    align-items: center;
  } 
  .list-item__image-container { 
    flex: 0 0 250px; 
  } 
}
.comic-reader { max-width: 800px; margin: 0 auto 3rem auto; background-color: #2c2c2c; border: 1px solid #444; border-radius: 8px; overflow: hidden; }
.comic-image-viewer { min-height: 300px; /* Placeholder height */ }
.comic-image-viewer img { width: 100%; height: auto; display: block; }
.comic-nav { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-gap: 0.75rem; gap: 0.75rem; align-items: center; padding: 1rem; border-bottom: 1px solid #444; }
.page-counter { grid-column: 1 / -1; grid-row: 2; text-align: center; font-family: var(--font-cinzel), serif; font-weight: bold; font-size: 1.1rem; }
.nav-button { background-color: #4a4a4a; color: #e0e0e0; border: 1px solid #333; padding: 0.5em 1.5em; border-radius: 5px; cursor: pointer; font-family: var(--font-cinzel), serif; font-size: 1rem; transition: background-color 0.2s ease; }
.nav-button:hover:not(:disabled) { background-color: #5a5a5a; }
.nav-button:disabled { background-color: #3a3a3a; color: #888; cursor: not-allowed; }
@media (min-width: 576px) { .comic-nav { display: flex; justify-content: space-between; border-bottom: 1px solid #444; } .page-counter { grid-column: auto; grid-row: auto; } }
.comic-synopsis { max-width: 800px; margin: 2rem auto 3rem auto; background-color: #252525; padding: 2rem; border-radius: 8px; border: 1px solid #444; text-align: center; }
.comic-synopsis h1 { font-size: 2.5rem; text-transform: uppercase; margin-bottom: 1.5rem; }
.comic-synopsis p { color: #ccc; line-height: 1.7; }
.bonus-content-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bonus-content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .bonus-content-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.bonus-content-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bonus-content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}
.bonus-content-card img {
  width: 100%;
  height: auto;
  display: block;
}
.game-chapter-list { display: flex; flex-direction: column; gap: 3rem; max-width: 800px; margin: 0 auto; }
.game-chapter-card { background-color: #252525; border: 1px solid #444; border-radius: 8px; overflow: hidden; text-align: center; }
.game-chapter-card__image-container { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.game-chapter-card__image-container img { object-fit: cover; width: 100%; height: 100%; }
.game-chapter-card__content { padding: 1.5rem; }
.game-chapter-card__description { color: #bbb; margin-bottom: 1.5rem; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.1rem; }
.game-chapter-card__button { display: inline-block; background: #d11a2a; color: white; padding: 0.8em 2em; border-radius: 5px; text-decoration: none; font-family: var(--font-cinzel), serif; font-weight: 700; transition: transform 0.2s ease; }
.game-chapter-card__button:hover { transform: scale(1.05); color: white; text-decoration: none; }
.single-story-page { max-width: 800px; margin: 0 auto; }
.story-header { text-align: center; margin-bottom: 3rem; }
.story-header h1 { font-size: 2.5rem; text-transform: uppercase; margin-bottom: 0.25rem; }
.story-header h2 { font-size: 1.5rem; color: #ccc; margin-bottom: 1.5rem; }
.story-header__excerpt { font-style: italic; color: #bbb; }
.story-content { background-color: #252525; border: 1px solid #444; border-radius: 8px; padding: 2rem; overflow-wrap: break-word; word-break: break-word; }
.story-content p { line-height: 1.8; color: #ddd; margin-bottom: 1.5em; }
.story-content ol, .story-content ul { padding-left: 2rem; margin-bottom: 1.5em; }
.story-content li { margin-bottom: 0.5em; }
.update-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }

/* Styles for the UpdateListItem component */
.update-list-item {
  background-color: #252525;
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.update-list-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  color: inherit;
  text-decoration: none;
}
.update-list-item:hover .update-list-item__title {
  color: #DB2716;
}
.update-list-item__header { background-color: #1f1f1f; padding: 1.5rem; border-bottom: 1px solid #444; text-align: center; }
.update-list-item__title {
  font-size: 1.5rem;
  margin-bottom: 0;
  color: #f5f5f5;
  transition: color 0.2s ease;
}
.update-list-item__body { padding: 1.5rem 2rem 2rem 2rem; position: relative; display: flex; flex-direction: column; justify-content: center; }
.update-list-item__meta-wrapper { position: absolute; top: 0; right: 0; margin-top: -14px; margin-right: 1.5rem; }
.update-list-item__meta { background-color: #3a3a3a; color: #ccc; font-size: 0.8rem; font-weight: bold; padding: 0.3em 0.8em; border-radius: 4px; border: 1px solid #444; }
.update-list-item__excerpt { color: #bbb; margin-top: 1rem; margin-bottom: 1.5rem; text-align: left; flex-grow: 1; }
.update-list-item__read-more { font-weight: bold; text-align: left; display: block; color: #ff6b6b; }

/* Styles for the Not Found Page */
.not-found-header {
  padding: 6rem 0;
  text-align: center;
}
@media (min-width: 768px) {
  .not-found-header {
    padding: 4rem 0;
  }
}
.nextjs-404-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  font-family: var(--font-cinzel), serif;
}
.nextjs-404-message h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
}
.nextjs-404-message p {
  font-size: 1rem;
  margin: 0;
  color: #ccc;
  line-height: 1;
  text-transform: uppercase;
}
.nextjs-404-divider {
  height: 32px;
  width: 1px;
  background-color: #555;
}
.not-found-message {
  max-width: 700px;
  margin: 0 auto;
}
.not-found-message h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f5f5f5;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .not-found-message h1 {
    font-size: 1.8rem;
  }
}
.scroll-down-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  color: #aaa;
  font-family: var(--font-cinzel), serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.scroll-down-icon {
  width: 24px;
  height: 40px;
  border: 2px solid #aaa;
  border-radius: 50px;
  position: relative;
}
.scroll-down-icon::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background-color: #DB2716;
  border-radius: 2px;
  animation: scroll-indicator-animation 2s infinite;
}
@keyframes scroll-indicator-animation {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 15px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 15px);
  }
}

/* Other page specific styles */
.access-denied-container { max-width: 800px; margin: 0 auto 3rem auto; border: 1px solid #444; border-radius: 8px; overflow: hidden; position: relative; background-image: url('/access-denied-bg.webp'); background-size: cover; background-position: center; }
.access-denied-box { background-color: rgba(26, 26, 26, 0.85); padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.access-denied-box h3 { font-size: 1.8rem; color: #fff; margin-bottom: 0; }
.access-denied-box p { color: #ddd; margin-bottom: 0.5rem; max-width: 450px; }
.access-denied-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; width: 100%; }
.explore-link { font-size: 0.9rem; color: #bbb; text-decoration: underline; transition: color 0.2s ease; }
.explore-link:hover { color: #fff; }
.connect-account { margin-top: 1.5rem; border-top: 1px solid #444; padding-top: 1.5rem; width: 100%; max-width: 450px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.connect-account p { font-size: 0.9rem; color: #bbb; margin-bottom: 0; }
.gate-button { display: inline-block; padding: 0.8em 1.5em; border-radius: 5px; border: none; text-decoration: none; font-family: var(--font-cinzel), serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; width: 100%; max-width: 450px; }
.gate-button:hover { transform: scale(1.05); text-decoration: none; }
.gate-button.primary { background: #DB2716; color: white; }
.gate-button.primary:hover { background-color: #ff4500; color: white; }
.gate-button.secondary { background-color: #4a4a4a; color: #e0e0e0; font-size: 0.9rem; padding: 0.6em 1.2em; width: auto; }
.gate-button.secondary:hover { background-color: #5a5a5a; }

/* Comic Preloading Styles */
.comic-loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding: 2rem;
}
.comic-loading-text {
  font-family: var(--font-cinzel), serif;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #ccc;
}
.comic-loading-bar-bg {
  width: 80%;
  max-width: 400px;
  height: 10px;
  background-color: #444;
  border-radius: 5px;
  overflow: hidden;
}
.comic-loading-bar-fill {
  height: 100%;
  background-color: #DB2716;
  border-radius: 5px;
  transition: width 0.3s ease-out;
  animation: pulse-bg 2s infinite ease-in-out;
}
@keyframes pulse-bg {
  0% { background-color: #DB2716; }
  50% { background-color: #ff6b6b; }
  100% { background-color: #DB2716; }
}

/* Comic Thumbnail Styles */
.comic-thumbnails-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #1f1f1f;
  border-top: 1px solid #444;
  padding: 0.5rem 0;
  scrollbar-width: none; /* For Firefox */
}
.comic-thumbnails-container::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, etc. */
}
.comic-thumbnails-track {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 1rem;
}
.comic-thumbnail {
  background: none;
  border: 2px solid transparent;
  padding: 2px;
  margin: 0 4px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
}
.comic-thumbnail:hover {
  border-color: #ff6b6b;
  opacity: 1;
}
.comic-thumbnail.active {
  border-color: #DB2716;
  opacity: 1;
}
.comic-thumbnail img {
  display: block;
  height: 90px;
  width: auto;
  border-radius: 2px;
  pointer-events: none; /* Ensures click goes to the button */
}

/* Age Gate Styles */
.age-gate-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 1rem;
}
.age-gate-modal {
  background-color: #252525;
  border: 1px solid #444;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
.age-gate-content {
  padding: 2rem;
  text-align: center;
}
.age-gate-modal h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.age-gate-modal p {
  color: #ccc;
  margin-bottom: 2rem;
}
.age-gate-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 576px) {
  .age-gate-actions {
    flex-direction: row;
  }
}