@media (max-width: 768px) {

  /* Gallery title */
  .gallery-title {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 1rem;
  }

  /* Slider container */
  .nbgm-thumb-slider {
    overflow-x: auto;
    gap: 0;
  }

  /* Hide nav arrows – swipe instead */
  .nbgm-thumb-nav {
    display: none;
  }

  /* Track becomes swipeable */
  .nbgm-thumb-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
  }

  /* Smaller thumbnails */
  .nbgm-thumb {
    width: 160px;
    height: 160px;
    flex: 0 0 160px;
    scroll-snap-align: start;
    border-radius: 14px;
  }

  .nbgm-thumb img {
    width: 160px !important;
    height: 160px !important;
    border-radius: 14px;
  }

  /* Disable hover zoom on touch devices */
  .nbgm-thumb:hover img {
    transform: none;
  }
}

@media (max-width: 768px) {

  /* Remove side spellbooks */
  body {
    background-image: url('../assets/bg/parchment-bg.png');
    background-repeat: repeat;
    background-size: auto;
  }

  /* HERO */
  .hero {
    width: 100%;
    margin-left: 0;
    min-height: auto;
  }

  .hero-split {
    flex-direction: column;
  }

  .hero-left,
  .hero-right {
    width: 100%;
  }

  .hero-right {
    height: 55vh;
  }

  .hero-left {
    padding: 2rem 1.25rem;
    text-align: center;
  }

  .hero-title {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  .hero-context {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {

  /* ENGINE PANELS STACK */
  .engine-panel,
  .engine-panel.reverse {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.25rem;
  }

  /* Image becomes a full-width block */
  .engine-media {
    width: 100%;
  }

  .engine-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Reset ordering for reverse panels */
  .engine-panel.reverse .engine-media,
  .engine-panel.reverse .engine-content {
    order: unset;
  }

  /* Text alignment for mobile reading */
  .engine-content h2 {
    font-size: 1.6rem;
    text-align: center;
  }

  .engine-intro {
    font-size: 1rem;
    text-align: center;
  }
}

/* Fix images in content */
@media (max-width: 768px) {

  .engine-media img {
    object-position: center top;
  }

}

/* Hamburger menu polish */
@media (max-width: 768px) {

  .navbar-collapse {
    background: #3a2e22;
    padding: 0.75rem 1rem;
    border-top: 1px solid #1e140d;
  }

  .navbar-nav .nav-link {
    padding: 0.6rem 0;
    font-size: 1.05rem;
  }
}

@media (max-width: 768px) {
  .navbar-toggler {
    padding: 0.35rem 0.5rem;
  }
}

/* Slider Fixes */
@media (max-width: 768px) {

  /* Slider fills container */
  .nbgm-thumb-slider {
    padding: 0;
  }

  /* Track snaps one item at a time */
  .nbgm-thumb-track {
    scroll-snap-type: x mandatory;
    gap: 0;
  }

  /* Each thumbnail fills viewport width */
  .nbgm-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: 14px;
  }

  .nbgm-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 14px;
  }
}

/* Slider Swipe Hint */
@media (max-width: 768px) {
  .nbgm-thumb-slider::after {
    content: "Swipe";
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.75rem;
    opacity: 0.5;
  }
}

/* hero Text Size Optimization*/
@media (max-width: 768px) {

  .hero-title {
    font-size: 1.7rem;        /* down from ~1.9–2.1 */
    line-height: 1.15;
  }

  .hero-context {
    font-size: 0.95rem;
    margin: 0.75rem 0 1.25rem;
  }

  .hero-left {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 768px) {
  .hero-title br {
    display: none;
  }
}

/* Game header UI */
@media (max-width: 768px) {

  .game-header {
    padding: 0.3rem 0;
    margin-bottom: 0.3rem;
  }

  .game-title {
    font-size: 1.15rem;
  }

  .game-subtitle {
    font-size: 0.9rem;
  }

  .game-session {
    font-size: 0.65rem;
  }
}

/* ===========================
   GAME LAYOUT ROOT
=========================== */
.game-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px); /* navbar */
}

/* image slider to swipe */
@media (max-width: 768px) {

  .nbgm-thumb-slider {
    overflow: visible; /* allow touch */
  }

  .nbgm-thumb-track {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
  }

  .nbgm-thumb {
    scroll-snap-align: start;
  }
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
  .nbgm-thumb-nav {
    display: none;
  }
}

/* Improve swipe feel */
@media (max-width: 768px) {
  .nbgm-thumb-track {
    padding-bottom: 1rem;
  }
}

/* Remove hover zoom */
@media (hover: none) {
  .nbgm-thumb:hover img {
    transform: none;
  }
}

/* Hide Image Slider for now */
@media (max-width: 768px) {
  /* .engine-section .nbgm-thumb-slider,
  .engine-section .gallery-title {
    display: none !important;
  } */
}
/* Hide slider for all for now */
.engine-section .nbgm-thumb-slider,
.engine-section .gallery-title {
  display: none !important;
}