.games-hero {
        padding: 56px 0 40px;
        text-align: center;
      }
      .games-hero__title {
        font-size: clamp(1.6rem, 4vw, 2.4rem);
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
      }
      .games-hero__title .accent { color: var(--pri-yellow); }
      .games-hero__subtitle {
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.72);
        max-width: 560px;
        margin: 0 auto;
        line-height: 1.65;
      }

      /* -- Game cards grid -- */
      .games-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 28px;
        padding-bottom: 60px;
      }

      .game-card {
        background: var(--white);
        border: 1px solid var(--header-bor-bottom);
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        display: flex;
        flex-direction: column;
      }
      .game-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 32px rgba(240, 154, 15, 0.12);
      }

      .game-card__banner {
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }

      /* Shoot-the-Answer banner - dark with floating balloon silhouettes */
      .game-card__banner--balloons {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--balloons::before {
        content: '\1F388';
        position: absolute;
        font-size: 3rem;
        opacity: 0.26;
        text-shadow: 0 0 18px rgba(255, 193, 7, 0.22);
        top: 18%;
        left: 14%;
        animation: float-card 4s ease-in-out infinite;
      }
      .game-card__banner--balloons::after {
        content: '\1F3AF';
        position: absolute;
        font-size: 2.2rem;
        opacity: 0.2;
        text-shadow: 0 0 14px rgba(255, 193, 7, 0.2);
        bottom: 20%;
        right: 16%;
        animation: float-card 5s ease-in-out infinite 1s;
      }

      /* JS Output Challenge banner - code editor style */
      .game-card__banner--code {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--code::before {
        content: '</>';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 2.2rem;
        font-weight: 700;
        opacity: 0.2;
        top: 16%;
        left: 12%;
        color: #FFC107;
        animation: float-card 4.5s ease-in-out infinite;
      }
      .game-card__banner--code::after {
        content: '{ }';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.8rem;
        font-weight: 700;
        opacity: 0.17;
        bottom: 18%;
        right: 14%;
        color: #FFC107;
        animation: float-card 5.5s ease-in-out infinite 0.8s;
      }
      /* Code Builder banner - puzzle blocks style */
      .game-card__banner--builder {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--builder::before {
        content: '[ ]';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 2rem;
        font-weight: 700;
        opacity: 0.2;
        top: 16%;
        left: 12%;
        color: #FFC107;
        animation: float-card 4.2s ease-in-out infinite;
      }
      .game-card__banner--builder::after {
        content: '?';
        position: absolute;
        font-size: 2.4rem;
        opacity: 0.16;
        bottom: 18%;
        right: 14%;
        color: #FFC107;
        animation: float-card 5.2s ease-in-out infinite 0.6s;
      }

      /* Type Racer banner - keyboard/typing style */
      .game-card__banner--typer {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--typer::before {
        content: 'let';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 2rem;
        font-weight: 700;
        opacity: 0.2;
        top: 16%;
        left: 12%;
        color: #FFC107;
        animation: float-card 4.3s ease-in-out infinite;
      }
      .game-card__banner--typer::after {
        content: '=>';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 2rem;
        font-weight: 700;
        opacity: 0.16;
        bottom: 18%;
        left: 12%;
        color: #FFC107;
        animation: float-card 5s ease-in-out infinite 0.5s;
      }

      /* Memory Match banner - card/brain style */
      .game-card__banner--memory {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--memory::before {
        content: '===';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.9rem;
        font-weight: 700;
        opacity: 0.2;
        top: 16%;
        left: 12%;
        color: #FFC107;
        animation: float-card 4.6s ease-in-out infinite;
      }
      .game-card__banner--memory::after {
        content: '[ ]';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 2rem;
        font-weight: 700;
        opacity: 0.16;
        bottom: 18%;
        left: 12%;
        color: #FFC107;
        animation: float-card 5.4s ease-in-out infinite 0.7s;
      }

      /* Bug Hunter banner - bug/magnifier style */
      .game-card__banner--bughunt {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--bughunt::before {
        content: 'try';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 2rem;
        font-weight: 700;
        opacity: 0.2;
        top: 16%;
        left: 12%;
        color: #FFC107;
        animation: float-card 4.4s ease-in-out infinite;
      }
      .game-card__banner--bughunt::after {
        content: 'catch';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.8rem;
        font-weight: 700;
        opacity: 0.16;
        bottom: 18%;
        left: 12%;
        color: #FFC107;
        animation: float-card 5.3s ease-in-out infinite 0.6s;
      }

      /* Chain React banner – method-chaining style */
      .game-card__banner--chain {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--chain::before {
        content: '.map()';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.6rem;
        font-weight: 700;
        opacity: 0.2;
        top: 14%;
        left: 10%;
        color: #FFC107;
        animation: float-card 4.1s ease-in-out infinite;
      }
      .game-card__banner--chain::after {
        content: '.join()';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.5rem;
        font-weight: 700;
        opacity: 0.16;
        bottom: 16%;
        left: 10%;
        color: #FFC107;
        animation: float-card 5.1s ease-in-out infinite 0.7s;
      }

      /* No Cap or Cap banner - meme/slang style */
      .game-card__banner--nocap {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--nocap::before {
        content: '\1F9E2';
        position: absolute;
        font-size: 2rem;
        opacity: 0.28;
        top: 16%;
        left: 12%;
        animation: float-card 4.3s ease-in-out infinite;
      }
      .game-card__banner--nocap::after {
        content: '\1F4AF';
        position: absolute;
        font-size: 2rem;
        opacity: 0.24;
        bottom: 18%;
        right: 14%;
        animation: float-card 5.2s ease-in-out infinite 0.6s;
      }

      /* Hoisting Elevator banner - elevator/floors style */
      .game-card__banner--elevator {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--elevator::before {
        content: '\1F6D7';
        position: absolute;
        font-size: 2rem;
        opacity: 0.28;
        top: 16%;
        left: 12%;
        animation: float-card 4.4s ease-in-out infinite;
      }
      .game-card__banner--elevator::after {
        content: 'var';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.7rem;
        font-weight: 700;
        opacity: 0.18;
        bottom: 18%;
        right: 14%;
        color: #FFC107;
        animation: float-card 5.2s ease-in-out infinite 0.6s;
      }

      /* Regex Rush banner - falling strings style */
      .game-card__banner--regex {
        background: linear-gradient(135deg, #121225 0%, #1a1a2e 100%);
      }
      .game-card__banner--regex::before {
        content: '/^\\d+$/';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.5rem;
        font-weight: 700;
        opacity: 0.22;
        top: 16%;
        left: 12%;
        color: #FFC107;
        animation: float-card 4.2s ease-in-out infinite;
      }
      .game-card__banner--regex::after {
        content: '[a-z]+';
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-size: 1.4rem;
        font-weight: 700;
        opacity: 0.18;
        bottom: 18%;
        right: 14%;
        color: #FFC107;
        animation: float-card 5.4s ease-in-out infinite 0.6s;
      }

      /* Third floating code label for bottom 3 banners */
      .game-card__banner .bf3 {
        position: absolute;
        font-family: 'Consolas', 'Fira Code', monospace;
        font-weight: 700;
        color: #FFC107;
        opacity: 0.2;
        text-shadow: 0 0 14px rgba(255, 193, 7, 0.22);
        pointer-events: none;
        animation: float-card 4.8s ease-in-out infinite 1.4s;
      }
      .game-card__banner--typer   .bf3 { font-size: 1.8rem; top: 16%; right: 12%; }
      .game-card__banner--memory  .bf3 { font-size: 1.7rem; top: 16%; right: 12%; }
      .game-card__banner--bughunt .bf3 { font-size: 1.8rem; top: 16%; right: 12%; }
      .game-card__banner--chain   .bf3 { font-size: 1.5rem; top: 14%; right: 10%; }
      .game-card__banner--nocap   .bf3 { font-size: 1.5rem; top: 14%; right: 10%; }
      .game-card__banner--elevator .bf3 { font-size: 1.5rem; top: 14%; right: 10%; }
      .game-card__banner--regex   .bf3 { font-size: 1.5rem; top: 14%; right: 10%; }

      @keyframes float-card {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-14px); }
      }

      .game-card__banner-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        z-index: 1;
      }
      .game-card__banner-icon--yellow {
        background: rgba(255, 193, 7, 0.22);
        border: 2px solid rgba(255, 193, 7, 0.5);
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.22);
        color: #FFC107;
      }

      .game-card__body {
        padding: 22px 24px 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .game-card__title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-blue);
        margin-bottom: 8px;
      }
      .game-card__desc {
        font-size: 0.92rem;
        color: var(--pro-h1-h-p);
        line-height: 1.6;
        margin-bottom: 20px;
        flex: 1;
      }

      .game-card__tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 18px;
      }
      .game-card__tag {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
        background: rgba(240, 154, 15, 0.1);
        color: var(--pri-yellow);
        letter-spacing: 0.3px;
        text-transform: uppercase;
      }
      body.dark-theme .game-card__tag {
        background: rgba(255, 193, 7, 0.12);
      }

      .game-card__play {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 28px;
        border-radius: 8px;
        font-size: 0.92rem;
        font-weight: 700;
        background: linear-gradient(135deg, #f09a0f, #d97e00);
        color: #fff;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        align-self: flex-start;
      }
      .game-card__play:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(240, 154, 15, 0.35);
        color: #fff;
      }

      /* -- Coming-soon placeholder card -- */
      .game-card--coming-soon {
        opacity: 0.55;
        pointer-events: none;
      }
      .game-card--coming-soon .game-card__banner {
        background: linear-gradient(135deg, #1e1e2e, #252540);
      }
      .game-card--coming-soon .game-card__play {
        background: #555;
      }

      @media (max-width: 600px) {
        .games-hero { padding: 40px 0 28px; }
        .games-grid { gap: 20px; }
        .game-card__banner { height: 140px; }
      }

      /* -- Force dark background for this page -- */
      body {
        background-color: #0c0c1d !important;
      }

      /* -- Background bubble canvas -- */
      #games-bg-canvas {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
      }