@media (max-width: 1200px) {
  .page-shell-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0;
    min-height: auto;
  }

  .page-shell-left,
  .page-shell-center,
  .page-shell-right {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .page-shell-left { order: 1; }
  .page-shell-center { order: 2; }
  .page-shell-right { order: 3; }

  .page-shell-nav {
    justify-content: center;
  }

  .page-shell-title {
    white-space: normal;
  }
}

@media (max-width: 920px) {
  .split {
    grid-template-columns: 1fr;
  }

  .modal-image-wrap {
    min-height: 280px;
  }

  .featured-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .group-nav {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 900px) {
  .page-intro-image-only {
    min-height: 260px;
  }

  .gallery-header-top {
    min-height: 96px;
    padding: 0.6rem 0 0.6rem;
  }

  .gallery-header-title-wrap {
    padding: 0 6.5rem;
  }

  .gallery-page-title {
    font-size: clamp(1.8rem, 5.8vw, 2.8rem);
  }
  .gallery-header-brand .brand {
      font-size: 0.7rem;
  }
}


@media (max-width: 640px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

  section {
    padding: 54px 0;
  }

  .top-button {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }

  .modal-box {
    width: min(100%, 96vw);
  }

  .modal-image-wrap {
    min-height: 220px;
  }

  .group-card-image {
    height: 190px;
  }

  .group-card-content,
  .panel,
  .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-intro-image-only {
    min-height: 200px;
  }

  .shell-brand .brand {
    font-size: 1.4rem;
  }

  .page-shell-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

  .page-shell-link,
  .page-shell-home {
    font-size: 0.74rem;
    padding: 4px 9px;
    min-height: 28px;
  }

  /* Gallery/category header on mobile */
  
  
  
  .gallery-top-nav {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
  }

  .gallery-nav-left {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  /* Hide sibling pills on mobile */
  .gallery-nav-right {
    display: none;
  }

  .gallery-pill-home,
  .gallery-pill-back {
    display: inline-flex;
  }
    /* Keep disabled/coming-soon card lock visible on mobile */
  .group-card.is-disabled {
      opacity: 0.82;
    pointer-events: none;
    cursor: default;
  }

  .group-card.is-disabled .group-card-image {
    position: relative;
    overflow: hidden;
  }

  .group-card.is-disabled .group-card-lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 16, 0.38);
    backdrop-filter: blur(2px);
  }

  .group-card.is-disabled .group-card-lock-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }
  /* =========================================================
   MOBILE FINAL TUNING
   ========================================================= */

  /* 1. Main page nav: stop hover/focus text staying visible after click */
  .nav-link::after,
  .nav-link:hover::after,
  .nav-link:focus::after {
    display: none;
    content: none;
  }

  .nav-link:hover,
  .nav-link:focus {
    color: var(--muted);
    transform: none;
  }

  .nav-link:hover::before,
  .nav-link:focus::before {
    width: 0;
  }


  /* 2. Gallery top banner: make it much shorter on phones */
  .gallery-header-top {
    min-height: 58px;
    padding: 0.35rem 0;
  }

  .gallery-header-brand {
    top: 0;
  }

  .gallery-header-brand .brand {
    font-size: 1rem;
  }

  .gallery-header-title-wrap {
    position: static;
    padding: 0;
    margin-top: 0.25rem;
  }

  .gallery-page-title {
    font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.1;
  }

  .gallery-header-floating-nav {
    position: static;
    margin-top: 0.45rem;
  }

  .gallery-pill {
    font-size: 0.72rem;
    min-height: 28px;
    padding: 0.34rem 0.62rem;
  }


  /* 3. Favourites thumbnails: taller, easier to understand */
  .best-pick-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .best-pick-link {
    height: 190px;
  }

  .best-pick-thumb img,
  .best-pick-link img {
    height: 100%;
    object-fit: cover;
  }


  /* 4. Floating buttons smaller on mobile */
  .gallery-jump-btn {
    left: 14px;
    bottom: 14px;
    padding: 9px 13px;
    font-size: 0.78rem;
  }

  .gallery-jump-btn-up {
    left: 14px;
    bottom: 72px;
  }
  /* Contact + Other Project stacked on mobile */
  .home-page #contact .container.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-page #contact .panel {
    width: 100%;
  }

  /* Hide 5th Favourite item on mobile */
  .best-pick-strip .best-pick-thumb:nth-child(n+5) {
    display: none;
  }
  /* Puzzle mobile layout */
  .puzzle-game {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .puzzle-board {
    width: 100%;
    max-width: 94vw;
    margin: 0 auto;
  }

  .puzzle-side {
    width: 100%;
  }

  .puzzle-pieces {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .puzzle-piece {
    min-width: 0;
    touch-action: none;
  }

  .puzzle-stats {
    justify-content: center;
  }

  .puzzle-result {
    grid-column: 1;
  }
  .quiz-card {
    grid-template-columns: 1fr;
  }

  .quiz-image-wrap img {
    min-height: 210px;
  }

  .quiz-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .quiz-image-choices {
    grid-template-columns: 1fr 1fr;
  }

  .quiz-image-choice-btn img {
    height: 135px;
  }
  
  /* =========================================================
   QUIZ MOBILE POLISH
   ========================================================= */

  .quiz-section .container {
    width: min(100% - 20px, 100%);
  }

  .quiz-app {
    width: 100%;
  }

  .quiz-topbar {
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .quiz-topbar > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #quizProgress,
  #quizScore,
  .quiz-timer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.14);
    font-weight: 900;
  }

  .quiz-timer {
    color: var(--accent);
  }

  .quiz-mini-btn,
  #quizStartStopBtn {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    background: linear-gradient(135deg, #f4c542 0%, #ff9f2f 100%);
    color: #111;
    border: 1px solid rgba(255,230,160,0.9);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.28),
      0 0 20px rgba(244,197,66,0.22);
  }
 
  .quiz-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px;
    border-radius: 18px;
  }

  .quiz-image-wrap {
    border-radius: 16px;
  } 
 
  .quiz-image-wrap img {
    min-height: 220px;
    max-height: 260px;
    object-fit: cover;
  }

  .quiz-content h3 {
    font-size: 1.12rem;
    line-height: 1.35;
    text-align: center;
  }

  .quiz-choices {
    gap: 10px;
  }

  .quiz-choice-btn {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.95rem;
    text-align: center;
  }

  .quiz-image-choices {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .quiz-image-choice-btn {
    border-radius: 14px;
  }

  .quiz-image-choice-btn img {
    height: 165px;
  }

  .quiz-image-choice-btn.is-correct {
    transform: scale(1.06);
  }

  .quiz-feedback {
    text-align: center;
    font-size: 1rem;
    min-height: 26px;
  }

  .quiz-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .quiz-actions .blur-btn,
  .quiz-result .blur-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    font-size: 0.98rem;
  }

  #quizNextBtn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  .quiz-result {
    padding: 20px 14px;
    border-radius: 18px;
  }

  .quiz-result h3 {
    font-size: 1.35rem;
  }

  #quizFinalScore {
    font-size: 1rem;
    line-height: 1.5;
  }

  .quiz-return-btn {
    right: 12px;
    top: 82px;
    padding: 10px 13px;
    font-size: 0.78rem;
  }

  .quiz-disabled {
    opacity: 0.45;
    pointer-events: none;
  }
  
  
  /* =========================================================
   TILE REVEAL MOBILE FIX
   ========================================================= */

  .tile-reveal-page .tile-game {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .tile-reveal-page .tile-game-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tile-reveal-page .tile-board-wrap {
    width: 100%;
    overflow: hidden;
  }

  .tile-reveal-page .tile-board {
    width: 100%;
    max-width: calc(100vw - 24px);
    margin: 0 auto;
    aspect-ratio: 5 / 4;
  }

  .tile-reveal-page .tile-side {
    width: 100%;
    max-width: calc(100vw - 24px);
    margin: 0 auto;
  }

  .tile-reveal-page .tile-stats {
    justify-content: center;
  }

  .tile-reveal-page .tile-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile-reveal-page .tile-choice-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    text-align: center;
  }

  .tile-reveal-page .tile-result {
    width: 100%;
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
    padding: 20px 14px;
  }

  .tile-reveal-page .tile-result .blur-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tile-reveal-page .tile-result .blur-btn {
    width: 100%;
  }  

  .tile-reveal-page .tile-start-modal {
    position: fixed;
    inset: 0;
    border-radius: 0;
    padding: 18px;
  }

  .tile-reveal-page .tile-start-card {
    width: min(100%, 420px);
    padding: 22px 16px;
  }

  .tile-reveal-page .tile-limit-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .tile-reveal-page .tile-limit-btn {
    width: 100%;
  }
  
  /* =========================================================
   MEMORY MOBILE POLISH
   ========================================================= */

  /* Main page Memory preview card */
  .memory-preview-grid {
    padding: 10px;
    gap: 6px;
  }

  .memory-preview-grid span {
    border-radius: 7px;
    font-size: 1rem;
  }

  /* Memory game board */
  .memory-board {
    max-width: calc(100vw - 28px);
    gap: 5px;
  }

  .memory-card {
    aspect-ratio: 1 / 1;
  }

  .memory-card-face {
    border-radius: 8px;
  }

  /* Memory start modal */
  .memory-start-modal {
    position: fixed;
    inset: 0;
    border-radius: 0;
    padding: 18px;
  }

  .memory-start-card {
    width: min(100%, 420px);
    padding: 22px 16px;
  }

  .memory-size-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .memory-size-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    font-weight: 900;
  }

  /* Hide large boards on mobile */
  .memory-size-btn.desktop-only {
    display: none;
  }
  
  /* Memory stats pills */
  .memory-topbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .memory-topbar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: 8px 12px;
    border-radius: 999px;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
  
    color: #f4f5f7;
    font-size: 0.82rem;
    font-weight: 900;

    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  }

  #memoryScore {
    color: var(--accent);
    border-color: rgba(213,179,106,0.45);
  }

  /* Memory result */
  .memory-result {
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
    padding: 20px 14px;
    border-radius: 18px;
  }

  .memory-result .blur-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .memory-result .blur-btn {
    width: 100%;
    min-height: 46px;
  }
  .leaderboard-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  /* =========================================================
   BLUR GAME MOBILE POLISH
   ========================================================= */

  .blur-game,
  .blur-section .container {
    width: 100%;
    max-width: 100%;
  }

  .blur-image-wrap,
  .blur-board-wrap {
    width: 100%;
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .blur-image-wrap img,
  #blurImage {
    max-width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: contain;
  }

  .blur-stats,
  .blur-actions,
  .tile-after-actions,
  #puzzleAfterActions,
  #memoryAfterActions,
  #quizAfterActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
  }

  .blur-actions .blur-btn,
  .tile-after-actions .blur-btn,
  #puzzleAfterActions .blur-btn,
  #memoryAfterActions .blur-btn,
  #quizAfterActions .blur-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .blur-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
  }
 
  .choice-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    text-align: center;
  }
 
  #focusBtn,
  #cancelBlurGame,
  #cancelTileGame,
  #cancelPuzzleGame,
  #cancelMemoryGame,
  #quizStopBtn {
    width: min(100%, 420px);
    min-height: 46px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  /* Result identity lines: Blur / Tile / Puzzle */
  .blur-result {
    width: 100%;
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .blur-result-line,
  .blur-gallery-line {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2px;
    line-height: 1.45;
    margin: 8px 0;
  }

  .blur-inline-space {
    display: none;
  }

  .blur-label-white,
  .blur-value-gold {
    display: block;
  }

  /* Shared result/save/leaderboard modal on mobile */
  .tile-result-modal,
  .memory-start-modal,
  .tile-start-modal {
    position: fixed;
    inset: 0;
    padding: 14px;
    overflow-y: auto;
  }

  .tile-result-card,
  .memory-start-card,
  .tile-start-card {
    width: min(100%, 430px);
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    padding: 20px 15px;
    border-radius: 20px;
  }

  .score-save-box input,
  .score-save-box button {
    width: 100%;
    min-height: 44px;
  }

  .leaderboard-box {
    width: 100%;
  }

  .vialens-trophy-card {
    width: min(100%, 430px);
  }

  .vialens-trophy-big-icon {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  
  .is-hidden,
  #tileChoices.is-hidden,
  .tile-choices.is-hidden,
  .blur-actions.is-hidden,
  #tileAfterActions.is-hidden,
  #puzzleAfterActions.is-hidden,
  #memoryAfterActions.is-hidden,
  #quizAfterActions.is-hidden {
    display: none !important;
  }
  .zoom-image-wrap {
    width: min(100%, calc(100vw - 44px));
    aspect-ratio: 4 / 3;
    max-width: 360px;
    border-radius: 18px;
  }

  .zoom-game .blur-choices,
  .zoom-game .blur-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, calc(100vw - 28px));
    margin-left: auto;
    margin-right: auto;
  }

  .zoom-game .choice-btn,
  .zoom-game .blur-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }
  .zoom-stats {
    display: grid;
    grid-template-columns: 1fr;
    max-width: calc(100vw - 28px);
  }

  .zoom-stats span {
    width: 100%;
  }

  .zoom-game #zoomSolvedInfo .blur-result-line,
  .zoom-game #zoomSolvedInfo .blur-gallery-line {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;

    gap: 2px;
    line-height: 1.45;
    margin: 8px 0;
  }
  
  .zoom-game #zoomSolvedInfo .blur-inline-space {
    display: none;
  }

  .zoom-game #zoomSolvedInfo .blur-label-white,
  .zoom-game #zoomSolvedInfo .blur-value-gold {
    display: block;
  }

  
  .letter-photo-wrap {
    width: min(100%, calc(100vw - 44px));
    max-width: 340px;
  }

  .letter-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: calc(100vw - 28px);
  }

  .letter-stats span {
    width: 100%;
  }

  .letter-hidden-words {
    width: calc(100vw - 28px);
    padding: 14px 10px;
  }

  .letter-char {
    min-width: 18px;
    min-height: 30px;
    font-size: 1.1rem;
  }

  .letter-alphabet {
    width: calc(100vw - 28px);
    grid-template-columns: repeat(7, 1fr);
  }

  .letter-btn {
    min-height: 42px;
  }

  .letter-game .blur-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100vw - 28px);
  }

  .letter-game .blur-btn {
    width: 100%;
    justify-content: center;
  }
 
  .name-builder-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: calc(100vw - 28px);
  }

  .name-builder-stats span {
    width: 100%;
  }

  .name-builder-board {
    width: calc(100vw - 28px);
  }

  .name-builder-row,
  .name-builder-bank-wrap {
    padding: 14px 10px;
  }

  .name-builder-slot,
  .name-builder-token {
    min-width: 0;
    min-height: 42px;
    padding: 9px 12px;
    font-size: 0.88rem;
  }

  .name-builder-controls {
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100vw - 28px);
  }

  .name-builder-controls .blur-btn,
  .name-builder-game .blur-actions .blur-btn {
    width: 100%;
    justify-content: center;
  }

  .name-builder-game .blur-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100vw - 28px);
  }
 
  .name-builder-meta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .name-builder-meta-group {
    display: grid;
    grid-template-columns: 80px 1fr;
    justify-content: stretch;
  }

  .name-builder-meta-group .name-builder-slot {
    width: 100%;
  }
  .name-builder-subtitle-group {
    display: grid;
    grid-template-columns: 80px 1fr;
    width: 100%;
  }

  .name-builder-subtitle-slot {
    width: 100%;
    min-width: 0;
  }

  .name-builder-bank .name-builder-token.is-subtitle-token {
    width: auto;
    max-width: 100%;
    display: inline-flex;
  }
 
  .name-builder-expert-group {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .name-builder-expert-group .name-builder-meta-label {
    text-align: center;
  }

  .name-builder-expert-group .name-builder-slots {
    justify-content: center;
  }
  
  .name-builder-level-card {
    padding: 10px 12px;
  }

  .name-builder-level-card span {
    font-size: 0.88rem;
  }

}