/* ── PAGE HEADER ── */
    .page-header {
      padding: 56px 5% 0;
      text-align: center;
    }

    .page-header-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--blush); color: var(--pink);
      font-weight: 700; font-size: 0.8rem; letter-spacing: 1.4px;
      text-transform: uppercase;
      padding: 5px 18px; border-radius: 50px;
      margin-bottom: 18px;
      animation: fadeUp 0.5s ease both;
    }
 
    .page-header h1 {
      font-family: 'Baloo 2', cursive;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 800; line-height: 1.1;
      margin-bottom: 14px;
      animation: fadeUp 0.5s 0.08s ease both;
    }
 
    .page-header p {
      color: #8a6a6a; font-size: 1rem; line-height: 1.7;
      max-width: 440px; margin: 0 auto;
      animation: fadeUp 0.5s 0.16s ease both;
    }
 
    /* ── FILTER TABS ── */
    .filter-bar {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 10px;
      padding: 36px 5% 0;
      animation: fadeUp 0.5s 0.22s ease both;
    }
 
    .filter-btn {
      font-family: 'Baloo 2', cursive;
      font-weight: 700; font-size: 0.88rem;
      padding: 8px 20px; border-radius: 50px;
      border: 2px solid rgba(92,26,46,0.12);
      background: var(--white); color: var(--maroon);
      cursor: pointer; transition: all 0.2s;
      white-space: nowrap;
    }
 
    .filter-btn:hover { border-color: var(--pink); color: var(--pink); }
 
    .filter-btn.active {
      background: var(--maroon); color: var(--white);
      border-color: var(--maroon);
      box-shadow: 0 4px 14px rgba(92,26,46,0.22);
    }
 
    /* ── GAME GRID ── */
    .game-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
      padding: 40px 5% 80px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ── GAME CARD ── */
    .game-card {
      background: var(--white);
      border-radius: var(--radius);
      overflow: visible;
      box-shadow: var(--shadow);
      display: flex; flex-direction: column;
      animation: fadeIn 0.5s ease both;   /* ← change fadeUp → fadeIn */
      position: relative;
      transform-style: preserve-3d;
      will-change: transform;
    }

 
    .game-card:hover {
      /* transform: translateY(-7px); */
      box-shadow: 0 18px 44px rgba(92,26,46,0.15);
    }
 
    /* age badge */
    .age-badge {
      position: absolute; top: 14px; left: 14px;
      background: rgba(255,255,255,0.92);
      color: var(--maroon);
      font-family: 'Baloo 2', cursive;
      font-weight: 600; 
      font-size: 0.72rem;
      letter-spacing: 0.5px;
      padding: 3px 10px; border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
      z-index: 2;
    }
 
    /* difficulty pip */
    .difficulty {
      position: absolute; top: 14px; right: 14px;
      display: flex; gap: 3px; z-index: 2;
    }
 
    .pip {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,0.4);
    }
 
    .pip.on { background: var(--white); }
 
    /* ── CARD THUMB ── */
    .card-thumb {
      aspect-ratio: 16/9;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;            /* ← move overflow:hidden here to clip deco circles */
      border-radius: var(--radius) var(--radius) 0 0;  /* ← keep top corners rounded */
      font-size: 6rem;
    }
 
    /* Animated shimmer on hover */
    .card-thumb::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.5s ease;
    }
    .game-card:hover .card-thumb::after { transform: translateX(100%); }
 
    /* thumb colour themes */
    .thumb-spell  { background: linear-gradient(135deg, #fde3b0, #f9c77a); }
    .thumb-match  { background: linear-gradient(135deg, #c5f0c8, #7ed4a0); }
    .thumb-build  { background: linear-gradient(135deg, #bde6f9, #75caee); }
    .thumb-listen { background: linear-gradient(135deg, #fce3ea, #f47fa0); }
    .thumb-story  { background: linear-gradient(135deg, #e5d4fc, #b490f7); }
    .thumb-sort   { background: linear-gradient(135deg, #fdd5d2, #f99b96); }
 
    /* decorative circles */
    .card-thumb .deco {
      position: absolute;
      border-radius: 50%;
      opacity: 0.18;
    }
 
    .card-body {
      padding: 20px 22px 22px;
      flex: 1; display: flex; flex-direction: column;
    }
 
    .card-category {
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      margin-bottom: 6px;
    }
 
    .card-title {
      font-family: 'Baloo 2', cursive;
      font-size: 1.18rem; font-weight: 800;
      color: var(--maroon); margin-bottom: 8px;
      line-height: 1.2;
    }
 
    .card-desc {
      font-size: 0.875rem; color: #8a6a6a;
      line-height: 1.6; margin-bottom: 18px;
      flex: 1;
    }
 
    .card-footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px;
    }
 
    .stars {
      display: flex; gap: 2px;
      font-size: 0.85rem;
    }
 
    .btn-play-card {
      font-family: 'Baloo 2', cursive;
      font-weight: 800; font-size: 0.88rem;
      color: var(--white);
      padding: 12px 22px; border-radius: 50px;
      text-decoration: none; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      transition: transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    .btn-play-card:hover { transform: translateY(-2px); }
 
    .btn-play-card svg { width: 12px; height: 12px; }
 
    /* category accent colours */
    .cat-spell  { color: var(--col-spell); }
    .cat-match  { color: var(--col-match); }
    .cat-build  { color: var(--col-build); }
    .cat-listen { color: var(--col-listen); }
    .cat-story  { color: var(--col-story); }
    .cat-sort   { color: var(--col-sort); }
 
    .play-spell  { background: linear-gradient(135deg, #f4a94d, #e08a2a); box-shadow: 0 4px 14px rgba(244,169,77,0.40); }
    .play-match  { background: linear-gradient(135deg, #6cc97b, #4aab5a); box-shadow: 0 4px 14px rgba(108,201,123,0.40); }
    .play-build  { background: linear-gradient(135deg, #5bbce4, #3a9dc8); box-shadow: 0 4px 14px rgba(91,188,228,0.40); }
    .play-listen { background: linear-gradient(135deg, #e8527a, #c0395c); box-shadow: 0 4px 14px rgba(232,82,122,0.40); }
    .play-story  { background: linear-gradient(135deg, #9b6cf0, #7a48d0); box-shadow: 0 4px 14px rgba(155,108,240,0.40); }
    .play-sort   { background: linear-gradient(135deg, #f97b6e, #e05545); box-shadow: 0 4px 14px rgba(249,123,110,0.40); }

    .disabled {
        background: #9E9E9E;
    }
 
    /* ── FEATURED BANNER ── */
    .featured-banner {
      margin: 0 5%;
      background: linear-gradient(135deg, var(--maroon), #9b2a4a);
      border-radius: 22px;
      padding: 36px 40px;
      display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
      box-shadow: 0 14px 40px rgba(92,26,46,0.22);
      position: relative; overflow: hidden;
      animation: fadeUp 0.5s 0.28s ease both;
    }
 
    .featured-banner::before {
      content: '⭐';
      position: absolute; right: 3%; top: 50%;
      transform: translateY(-50%);
      font-size: 7rem; opacity: 0.07;
      pointer-events: none;
    }
 
    .featured-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.15);
      color: var(--white); font-size: 0.75rem;
      font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
      padding: 4px 14px; border-radius: 50px; margin-bottom: 10px;
    }
 
    .featured-banner h2 {
      font-family: 'Baloo 2', cursive;
      font-size: clamp(1.4rem, 3vw, 1.9rem);
      font-weight: 800; color: var(--white); margin-bottom: 6px;
    }
 
    .featured-banner p { color: rgba(255,255,255,0.72); font-size: 0.9rem; line-height: 1.6; max-width: 380px; }
 
    .btn-featured {
      background: var(--white); color: var(--maroon);
      font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 0.95rem;
      padding: 12px 30px; border-radius: 50px; text-decoration: none;
      white-space: nowrap; flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(0,0,0,0.14);
      transition: transform 0.2s, box-shadow 0.2s;
      display: inline-flex; align-items: center; gap: 8px;
    }
 
    .btn-featured:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
 
    /* ── EMPTY STATE ── */
    .empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 20px;
      display: none;
    }
 
    .empty.show { display: block; }
    .empty-icon { font-size: 3.5rem; margin-bottom: 14px; }
    .empty h3 { font-family: 'Baloo 2', cursive; font-size: 1.3rem; color: var(--maroon); margin-bottom: 6px; }
    .empty p { color: #8a6a6a; font-size: 0.9rem; }
 
    /* ── FOOTER ── */
    footer {
      text-align: center; padding: 24px 5%;
      font-size: 0.82rem; color: #b0a0a0;
      border-top: 1px solid rgba(232,82,122,0.08);
    }
 
    footer a { color: var(--pink); text-decoration: none; }
 
    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
 
    /* ── MOBILE ── */
    @media (max-width: 680px) {
      .nav-links {
        display: none; flex-direction: column; gap: 16px;
        position: absolute; top: 62px; left: 0; right: 0;
        background: rgba(253,245,237,0.97); backdrop-filter: blur(14px);
        padding: 22px 5% 26px;
        border-bottom: 1px solid rgba(232,82,122,0.10); z-index: 99;
      }
      .nav-links.open { display: flex; }
      .hamburger { display: flex; }
      nav { position: relative; }
 
      .featured-banner { flex-direction: column; padding: 28px 24px; }
      .featured-banner::before { display: none; }
 
      .filter-bar { gap: 8px; }
      .filter-btn { font-size: 0.82rem; padding: 7px 16px; }
 
      .game-grid { grid-template-columns: 1fr; padding: 32px 5% 60px; }
    }