radial-gradient(circle at 68% 62%, rgba(59, 130, 246, 0.45), transparent 60%),
          linear-gradient(140deg, rgba(15, 118, 110, 0.32), rgba(67, 56, 202, 0.2));
        opacity: 0.85;
        filter: blur(7px);
      }

      .game-loop[data-loop="darkcastle"] {
        background-image:
          radial-gradient(circle at 38% 32%, rgba(148, 163, 184, 0.45), transparent 58%),
          radial-gradient(circle at 70% 68%, rgba(250, 204, 21, 0.35), transparent 60%),
          linear-gradient(135deg, rgba(59, 73, 112, 0.46), rgba(15, 23, 42, 0.46));
        opacity: 0.88;
        filter: blur(6px);
      }

      .game-loop[data-loop="tron"] {
        background-image:
          radial-gradient(circle at 48% 42%, rgba(59, 130, 246, 0.45), transparent 60%),
          radial-gradient(circle at 65% 74%, rgba(6, 182, 212, 0.4), transparent 60%),
          linear-gradient(90deg, rgba(100, 255, 246, 0.2), rgba(59, 130, 246, 0.16));
        opacity: 0.85;
        filter: blur(7px);
      }

      .game-loop[data-loop="pac-commons"] {
        background-image:
          radial-gradient(circle at 46% 44%, rgba(255, 225, 105, 0.48), transparent 60%),
          radial-gradient(circle at 68% 70%, rgba(255, 77, 109, 0.32), transparent 62%),
          linear-gradient(135deg, rgba(100, 255, 246, 0.2), rgba(8, 10, 40, 0.42));
        opacity: 0.9;
        filter: blur(6px);
      }

      .game-loop[data-loop="digger"] {
        background-image:
          radial-gradient(circle at 44% 42%, rgba(236, 72, 153, 0.45), transparent 60%),
          radial-gradient(circle at 68% 70%, rgba(249, 115, 22, 0.32), transparent 62%),
          linear-gradient(140deg, rgba(251, 191, 36, 0.18), rgba(59, 130, 246, 0.12));
        opacity: 0.9;
        filter: blur(6px);
      }

      .game-loop[data-loop="hyperloop"] {
        background-image:
          radial-gradient(circle at 42% 45%, rgba(56, 189, 248, 0.48), transparent 65%),
          radial-gradient(circle at 70% 68%, rgba(168, 85, 247, 0.4), transparent 60%),
          linear-gradient(45deg, rgba(14, 165, 233, 0.32), rgba(251, 191, 36, 0.18));
        opacity: 0.88;
        filter: blur(6px);
      }

      .game-loop[data-loop="whipit"] {
        background-image:
          radial-gradient(circle at 42% 32%, rgba(168, 85, 247, 0.45), transparent 60%),
          radial-gradient(circle at 68% 72%, rgba(244, 114, 182, 0.36), transparent 62%),
          linear-gradient(150deg, rgba(15, 23, 42, 0.6), rgba(30, 64, 175, 0.28));
        opacity: 0.88;
        filter: blur(6px);
      }

      .game-loop[data-loop="wolfenstein"] {
        background-image:
          radial-gradient(circle at 40% 32%, rgba(239, 68, 68, 0.45), transparent 60%),
          radial-gradient(circle at 72% 70%, rgba(37, 99, 235, 0.28), transparent 60%),
          linear-gradient(90deg, rgba(15, 23, 42, 0.65), rgba(239, 68, 68, 0.2));
        opacity: 0.82;
        filter: blur(7px);
      }

      .game-loop[data-loop="circuit"] {
        background-image:
          radial-gradient(circle at 42% 35%, rgba(125, 211, 252, 0.45), transparent 60%),
          radial-gradient(circle at 70% 68%, rgba(167, 139, 250, 0.38), transparent 60%),
          linear-gradient(120deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.18));
        opacity: 0.88;
        filter: blur(6px);
      }

      .game-loop[data-loop="farmstead"] {
        background-image:
          radial-gradient(circle at 45% 30%, rgba(74, 222, 128, 0.45), transparent 65%),
          radial-gradient(circle at 72% 70%, rgba(45, 212, 191, 0.35), transparent 60%),
          linear-gradient(110deg, rgba(234, 179, 8, 0.22), rgba(56, 189, 248, 0.14));
        opacity: 0.88;
        filter: blur(6px);
      }

      .game-loop[data-loop="echo"] {
        background-image:
          radial-gradient(circle at 48% 32%, rgba(31, 182, 255, 0.5), transparent 60%),
          radial-gradient(circle at 66% 68%, rgba(255, 184, 107, 0.32), transparent 60%),
          linear-gradient(120deg, rgba(105, 252, 213, 0.3), rgba(15, 23, 42, 0.2));
        opacity: 0.9;
        filter: blur(6px);
      }

      .game-loop[data-loop="threshold"] {
        background-image:
          radial-gradient(circle at 42% 34%, rgba(248, 250, 252, 0.36), transparent 60%),
          radial-gradient(circle at 68% 68%, rgba(250, 204, 21, 0.24), transparent 62%),
          linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(15, 23, 42, 0.36));
        opacity: 0.88;
        filter: blur(6px);
      }

      .game-loop[data-loop="neon"] {
        background-image:
          radial-gradient(circle at 45% 35%, rgba(244, 114, 182, 0.45), transparent 60%),
          radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.45), transparent 60%),
          linear-gradient(130deg, rgba(59, 130, 246, 0.2), rgba(15, 23, 42, 0.18));
        opacity: 0.86;
        filter: blur(6px);
      }

      .game-loop[data-loop="atomfall"] {
        background-image:
          radial-gradient(circle at 44% 32%, rgba(16, 185, 129, 0.45), transparent 62%),
          radial-gradient(circle at 68% 68%, rgba(56, 189, 248, 0.38), transparent 64%),
          linear-gradient(135deg, rgba(12, 74, 110, 0.32), rgba(103, 232, 249, 0.16));
        opacity: 0.9;
        filter: blur(6px);
      }

      .game-preview::before,
      .game-preview::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        transform-origin: center;
      }

      .game-preview[data-preview="pizzaria"]::before {
        background: url("../textures/cover-pizzaria.svg") center / cover no-repeat;
        opacity: 0.92;
        animation: cover-drift 18s ease-in-out infinite;
      }

      .game-preview[data-preview="pizzaria"]::after {
        background:
          radial-gradient(circle at 50% 32%, rgba(250, 204, 21, 0.42), transparent 60%),
          radial-gradient(circle at 22% 82%, rgba(244, 114, 182, 0.35), transparent 65%);
        mix-blend-mode: screen;
        opacity: 0.55;
        animation: cover-glimmer 4.5s ease-in-out infinite;
      }

      .game-preview[data-preview="shootout"]::before {
        background: url("../textures/cover-shootout.svg") center / cover no-repeat;
        opacity: 0.95;
        animation: cover-drift 22s ease-in-out infinite;
      }

      .game-preview[data-preview="shootout"]::after {
        background-image:
          repeating-linear-gradient(120deg, rgba(56, 189, 248, 0.25) 0 18px, transparent 18px 36px),
          repeating-linear-gradient(60deg, rgba(244, 114, 182, 0.18) 0 16px, transparent 16px 32px);
        animation: shootout-streak 6s linear infinite;
        mix-blend-mode: screen;
        opacity: 0.45;
      }

      .game-preview[data-preview="darkcastle"]::before {
        background: url("../textures/cover-dark-castle.svg") center / cover no-repeat;
        opacity: 0.95;
        animation: cover-drift 26s ease-in-out infinite;
      }

      .game-preview[data-preview="darkcastle"]::after {
        background:
          radial-gradient(circle at 44% 28%, rgba(254, 240, 138, 0.4), transparent 60%),
          radial-gradient(circle at 70% 72%, rgba(96, 165, 250, 0.32), transparent 62%);
        mix-blend-mode: screen;
        opacity: 0.5;
        animation: cover-glimmer 5.5s ease-in-out infinite;
      }

      .game-preview[data-preview="tron"]::before {
        background: url("../textures/cover-tron.svg") center / cover no-repeat;
        opacity: 0.94;
        animation: cover-drift 20s ease-in-out infinite;
      }

      .game-preview[data-preview="tron"]::after {
        background:
          radial-gradient(circle at 50% 32%, rgba(56, 189, 248, 0.45), transparent 60%),
          radial-gradient(circle at 48% 88%, rgba(14, 165, 233, 0.35), transparent 65%);
        opacity: 0.32;
        mix-blend-mode: screen;
        animation: tron-pulse 7s ease-in-out infinite;
      }

      .game-preview[data-preview="pac-commons"]::before {
        background:
          radial-gradient(circle at 36% 58%, rgba(255, 225, 105, 0.95) 0 32%, transparent 36%),
          radial-gradient(circle at 70% 30%, rgba(255, 77, 109, 0.58), transparent 60%),
          radial-gradient(circle at 20% 24%, rgba(100, 255, 246, 0.36), transparent 64%),
          linear-gradient(150deg, rgba(12, 14, 50, 0.92), rgba(5, 7, 26, 0.95));
        opacity: 0.92;
        animation: cover-drift 20s ease-in-out infinite;
      }

      .game-preview[data-preview="pac-commons"]::after {
        background:
          radial-gradient(circle at 32% 62%, rgba(255, 225, 105, 0.45), transparent 65%),
          radial-gradient(circle at 62% 40%, rgba(255, 77, 109, 0.33), transparent 70%);
        opacity: 0.5;
        mix-blend-mode: screen;
        animation: cover-glimmer 5s ease-in-out infinite;
      }

      .game-preview[data-preview="atomfall"]::before {
        background:
          radial-gradient(circle at 42% 44%, rgba(16, 185, 129, 0.85), transparent 60%),
          radial-gradient(circle at 68% 68%, rgba(56, 189, 248, 0.55), transparent 62%),
          linear-gradient(150deg, rgba(8, 47, 73, 0.9), rgba(2, 6, 23, 0.95));
        opacity: 0.92;
        animation: cover-drift 22s ease-in-out infinite;
      }

      .game-preview[data-preview="atomfall"]::after {
        background:
          radial-gradient(circle at 52% 32%, rgba(34, 211, 238, 0.38), transparent 60%),
          radial-gradient(circle at 28% 78%, rgba(22, 163, 74, 0.28), transparent 64%);
        mix-blend-mode: screen;
        opacity: 0.45;
        animation: cover-glimmer 6.5s ease-in-out infinite;
      }

      .game-preview[data-preview="digger"]::before {
        background:
          radial-gradient(circle at 40% 36%, rgba(236, 72, 153, 0.45), transparent 58%),
          radial-gradient(circle at 72% 62%, rgba(251, 191, 36, 0.32), transparent 60%),
          radial-gradient(circle at 30% 78%, rgba(129, 140, 248, 0.28), transparent 64%),
          linear-gradient(140deg, rgba(8, 10, 40, 0.72), rgba(15, 23, 42, 0.92));
        opacity: 0.9;
        animation: cover-drift 20s ease-in-out infinite;
      }

      .game-preview[data-preview="digger"]::after {
        background:
          repeating-linear-gradient(135deg, rgba(236, 72, 153, 0.18) 0 18px, transparent 18px 36px),
          radial-gradient(circle at 62% 44%, rgba(249, 115, 22, 0.28), transparent 58%);
        mix-blend-mode: screen;
        opacity: 0.45;
        animation: cover-glimmer 5s ease-in-out infinite;
      }

      .game-preview[data-preview="hyperloop"]::before {
        background: url("../textures/cover-hyperloop.svg") center / cover no-repeat;
        opacity: 0.94;
        animation: cover-drift 24s ease-in-out infinite;
      }

      .game-preview[data-preview="hyperloop"]::after {
        background:
          radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.35), transparent 60%),
          conic-gradient(from 0deg at 50% 55%, rgba(168, 85, 247, 0.25), transparent 240deg);
        opacity: 0.4;
        mix-blend-mode: screen;
        animation: hyperloop-rings 10s ease-in-out infinite;
      }

      .game-preview[data-preview="whipit"]::before {
        background:
          linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.72)),
          radial-gradient(circle at 60% 30%, rgba(147, 51, 234, 0.45), transparent 65%),
          radial-gradient(circle at 20% 70%, rgba(14, 116, 144, 0.32), transparent 60%);
        opacity: 0.94;
        animation: cover-drift 28s ease-in-out infinite;
      }

      .game-preview[data-preview="whipit"]::after {
        background:
          conic-gradient(from 120deg at 48% 50%, rgba(250, 204, 21, 0.18), transparent 180deg),
          radial-gradient(circle at 48% 40%, rgba(236, 72, 153, 0.24), transparent 58%);
        mix-blend-mode: screen;
        opacity: 0.42;
        animation: whipit-flare 7s ease-in-out infinite;
      }

      .game-preview[data-preview="wolfenstein"]::before {
        background: url("../textures/cover-wolfenstein.svg") center / cover no-repeat;
        opacity: 0.92;
        animation: cover-drift 26s ease-in-out infinite;
      }

      .game-preview[data-preview="wolfenstein"]::after {
        background:
          repeating-linear-gradient(0deg, rgba(248, 113, 113, 0.25) 0 12px, transparent 12px 24px),
          linear-gradient(180deg, rgba(15, 23, 42, 0.35), rgba(2, 6, 23, 0.85));
        opacity: 0.32;
        mix-blend-mode: screen;
        animation: wolfenstein-strobe 12s ease-in-out infinite;
      }

      .game-preview[data-preview="manhole"]::before {
        background: url("../textures/cover-manhole.svg") center / cover no-repeat;
        opacity: 0.94;
        animation: cover-drift 28s ease-in-out infinite;
      }

      .game-preview[data-preview="manhole"]::after {
        background:
          conic-gradient(from 0deg at 50% 50%, rgba(244, 114, 182, 0.22), rgba(125, 211, 252, 0.3), rgba(248, 250, 252, 0.14), rgba(244, 114, 182, 0.22));
        mix-blend-mode: screen;
        opacity: 0.45;
        animation: manhole-pulse 9s ease-in-out infinite;
      }

      .game-preview[data-preview="circuit"]::before {
        background: url("../textures/cover-circuit.svg") center / cover no-repeat;
        opacity: 0.95;
        animation: cover-drift 20s ease-in-out infinite;
      }

      .game-preview[data-preview="circuit"]::after {
        background-image:
          linear-gradient(90deg, rgba(125, 211, 252, 0.28) 0 1px, transparent 1px 18px),
          linear-gradient(0deg, rgba(167, 139, 250, 0.24) 0 1px, transparent 1px 18px);
        background-size: 60px 60px;
        mix-blend-mode: screen;
        opacity: 0.35;
        animation: circuit-flow 18s linear infinite;
      }

      .game-preview[data-preview="farmstead"]::before {
        background: url("../textures/cover-farmstead.svg") center / cover no-repeat;
        opacity: 0.94;
        animation: cover-drift 24s ease-in-out infinite;
      }

      .game-preview[data-preview="farmstead"]::after {
        background:
          linear-gradient(180deg, rgba(74, 222, 128, 0.28), transparent 70%),
          radial-gradient(circle at 70% 30%, rgba(250, 204, 21, 0.38), transparent 60%);
        opacity: 0.32;
        mix-blend-mode: screen;
        animation: farmstead-breeze 8s ease-in-out infinite;
      }

      .game-preview[data-preview="echo"]::before {
        background: url("../textures/cover-echo-reef.svg") center / cover no-repeat;
        opacity: 0.95;
        animation: cover-drift 26s ease-in-out infinite;
      }

      .game-preview[data-preview="echo"]::after {
        background:
          radial-gradient(circle at 52% 36%, rgba(31, 182, 255, 0.42), transparent 60%),
          radial-gradient(circle at 62% 68%, rgba(255, 184, 107, 0.28), transparent 65%);
        mix-blend-mode: screen;
        opacity: 0.38;
        animation: echo-respire 9s ease-in-out infinite;
      }

      .game-preview[data-preview="threshold"]::before {
        background: url("../textures/cover-threshold.svg") center / cover no-repeat;
        opacity: 0.94;
        animation: cover-drift 28s ease-in-out infinite;
      }

      .game-preview[data-preview="threshold"]::after {
        background:
          repeating-linear-gradient(90deg, rgba(248, 250, 252, 0.22), rgba(248, 250, 252, 0.22) 2px, transparent 2px, transparent 18px),
          radial-gradient(circle at 60% 34%, rgba(250, 204, 21, 0.32), transparent 62%);
        mix-blend-mode: screen;
        opacity: 0.34;
        animation: threshold-flicker 7s ease-in-out infinite;
      }

      .game-preview[data-preview="wing-commander"]::before {
        background:
          radial-gradient(circle at 24% 32%, rgba(59, 130, 246, 0.4), transparent 58%),
          radial-gradient(circle at 72% 68%, rgba(192, 38, 211, 0.24), transparent 62%),
          linear-gradient(150deg, rgba(4, 6, 22, 0.9), rgba(2, 4, 16, 0.98));
        opacity: 0.94;
        animation: cover-drift 24s ease-in-out infinite;
      }

      .game-preview[data-preview="wing-commander"]::after {
        background:
          conic-gradient(from 0deg at 50% 48%, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.08) 220deg, rgba(244, 114, 182, 0.24) 320deg),
          radial-gradient(circle at 48% 40%, rgba(191, 219, 254, 0.24), transparent 60%),
          radial-gradient(circle at 62% 70%, rgba(251, 191, 36, 0.2), transparent 64%);
        mix-blend-mode: screen;
        opacity: 0.45;
        animation: cover-glimmer 7s ease-in-out infinite;
      }

      .game-preview[data-preview="neon"]::before {
        background: url("../textures/cover-neon.svg") center / cover no-repeat;
        opacity: 0.94;
        animation: cover-drift 20s ease-in-out infinite;
      }

      .game-preview[data-preview="neon"]::after {
        background-image: linear-gradient(0deg, rgba(59, 130, 246, 0.3) 0 10%, transparent 10% 20%);
        background-size: 100% 140%;
        mix-blend-mode: screen;
        opacity: 0.45;
        animation: neon-fall 6s linear infinite;
      }

      @keyframes cover-drift {
        0%,
        100% {
          transform: scale(1.04) translate3d(0, 0, 0);
        }
        45% {
          transform: scale(1.08) translate3d(1.5%, -1.5%, 0);
        }
        70% {
          transform: scale(1.06) translate3d(-1%, 1%, 0);
        }
      }

      @keyframes loop-pan {
        0% {
          transform: translate3d(-10%, -10%, 0) rotate(0deg);
        }
        50% {
          transform: translate3d(10%, 10%, 0) rotate(180deg);
        }
        100% {
          transform: translate3d(-10%, -10%, 0) rotate(360deg);
        }
      }

      @keyframes cover-glimmer {
        0%,
        100% {
          opacity: 0.4;
          transform: scale(1);
        }
        50% {
          opacity: 0.65;
          transform: scale(1.05);
        }
      }

      @keyframes shootout-streak {
        0% {
          background-position: 0 0, 0 0;
        }
        100% {
          background-position: 180px -120px, -160px 160px;
        }
      }

      @keyframes tron-pulse {
        0%,
        100% {
          opacity: 0.28;
          transform: scale(1);
        }
        50% {
          opacity: 0.5;
          transform: scale(1.08);
        }
      }

      @keyframes hyperloop-rings {
        0%,
        100% {
          opacity: 0.32;
          transform: scale(0.98) rotate(0deg);
        }
        60% {
          opacity: 0.52;
          transform: scale(1.06) rotate(3deg);
        }
      }

      @keyframes whipit-flare {
        0%,
        100% {
          opacity: 0.32;
          transform: rotate(0deg) scale(1);
        }
        50% {
          opacity: 0.55;
          transform: rotate(8deg) scale(1.05);
        }
      }

      @keyframes wolfenstein-strobe {
        0%,
        100% {
          opacity: 0.22;
        }
        40% {
          opacity: 0.45;
        }
        70% {
          opacity: 0.28;
        }
      }

      @keyframes manhole-pulse {
        0% {
          transform: scale(0.9) rotate(0deg);
          opacity: 0.35;
        }
        50% {
          transform: scale(1.05) rotate(6deg);
          opacity: 0.6;
        }
        100% {
          transform: scale(0.9) rotate(12deg);
          opacity: 0.35;
        }
      }

      @keyframes circuit-flow {
        0% {
          background-position: 0 0, 0 0;
        }
        100% {
          background-position: 120px 80px, -80px 120px;
        }
      }

      @keyframes farmstead-breeze {
        0%,
        100% {
          opacity: 0.28;
          transform: translateY(0);
        }
        50% {
          opacity: 0.48;
          transform: translateY(-6px);
        }
      }

      @keyframes neon-fall {
        0% {
          background-position: 0 -120%;
        }
        100% {
          background-position: 0 200%;
        }
      }

      @keyframes echo-respire {
        0%,
        100% {
          opacity: 0.28;
          transform: scale(0.96);
        }
        50% {
          opacity: 0.48;
          transform: scale(1.06);
        }
      }

      @keyframes threshold-flicker {
        0%,
        100% {
          opacity: 0.28;
        }
        46% {
          opacity: 0.6;
        }
        56% {
          opacity: 0.18;
        }
        70% {
          opacity: 0.5;
        }
      }

      .game-cover {
        position: relative;
        aspect-ratio: 21 / 10;
        display: grid;
        place-items: end start;
        padding: 1rem;
        color: var(--text);
        background: radial-gradient(circle at 25% 20%, rgba(56, 189, 248, 0.4), rgba(15, 23, 42, 0.15) 45%, rgba(2, 6, 23, 0.85)),
          linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.95));
      }

      .game-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            to right,
            rgba(148, 163, 184, 0.18),
            rgba(148, 163, 184, 0.18) 2px,
            transparent 2px,
            transparent 20px
          ),
          repeating-linear-gradient(
            to bottom,
            rgba(148, 163, 184, 0.16),
            rgba(148, 163, 184, 0.16) 2px,
            transparent 2px,
            transparent 20px
          );
        mix-blend-mode: screen;
        opacity: 0.18;
        pointer-events: none;
      }

      .pac-card .game-cover {
        background:
          radial-gradient(circle at 32% 60%, rgba(255, 225, 105, 0.52), transparent 62%),
          radial-gradient(circle at 70% 32%, rgba(255, 77, 109, 0.35), transparent 60%),
          linear-gradient(140deg, rgba(9, 12, 48, 0.92), rgba(3, 5, 22, 0.97));
      }

      .pac-card .game-cover::after {
        background:
          radial-gradient(circle at 28% 58%, rgba(255, 225, 105, 0.5), transparent 65%),
          radial-gradient(circle at 64% 36%, rgba(255, 77, 109, 0.25), transparent 68%);
        opacity: 0.26;
      }

      .wolf-card .game-cover {
        background:
          radial-gradient(circle at 18% 22%, rgba(96, 165, 250, 0.4), transparent 60%),
          radial-gradient(circle at 78% 78%, rgba(250, 204, 21, 0.25), transparent 62%),
          linear-gradient(145deg, rgba(6, 10, 24, 0.9), rgba(2, 6, 23, 0.97));
      }

      .manhole-card .game-cover {
        background:
          url("../textures/cover-manhole.svg") center / cover no-repeat,
          radial-gradient(circle at 24% 26%, rgba(125, 211, 252, 0.38), transparent 58%),
          radial-gradient(circle at 78% 72%, rgba(244, 114, 182, 0.34), transparent 60%),
          linear-gradient(155deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98));
      }

      .manhole-card .game-cover::after {
        background:
          conic-gradient(from 0deg at 50% 50%, rgba(244, 114, 182, 0.18), rgba(125, 211, 252, 0.25), transparent 260deg);
        opacity: 0.24;
        filter: blur(10px);
      }

      .atomfall-card .game-cover {
        background:
          radial-gradient(circle at 22% 26%, rgba(16, 185, 129, 0.48), transparent 58%),
          radial-gradient(circle at 70% 74%, rgba(56, 189, 248, 0.38), transparent 60%),
          linear-gradient(155deg, rgba(5, 15, 32, 0.92), rgba(1, 8, 20, 0.98));
      }

      .atomfall-card .game-cover::after {
        background:
          repeating-linear-gradient(110deg, rgba(16, 185, 129, 0.16) 0 12px, transparent 12px 24px),
          radial-gradient(circle at 60% 40%, rgba(56, 189, 248, 0.3), transparent 58%);
        opacity: 0.28;
      }

      .threshold-card .game-cover {
        background:
          url("../textures/cover-threshold.svg") center / cover no-repeat,
          radial-gradient(circle at 30% 26%, rgba(248, 250, 252, 0.2), transparent 55%),
          radial-gradient(circle at 70% 74%, rgba(56, 189, 248, 0.28), transparent 60%),
          linear-gradient(150deg, rgba(15, 23, 42, 0.86), rgba(3, 6, 18, 0.96));
      }

      .threshold-card .game-cover::after {
        background:
          repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.16) 1px, transparent 1px, transparent 18px),
          radial-gradient(circle at 64% 42%, rgba(250, 204, 21, 0.3), transparent 58%);
        opacity: 0.32;
      }

      .stellar-card .game-cover {
        background:
          radial-gradient(circle at 24% 30%, rgba(56, 189, 248, 0.36), transparent 58%),
          radial-gradient(circle at 76% 70%, rgba(244, 114, 182, 0.28), transparent 60%),
          linear-gradient(150deg, rgba(3, 8, 22, 0.92), rgba(1, 5, 16, 0.98));
      }

      .stellar-card .game-cover::after {
        background:
          conic-gradient(from 140deg at 50% 50%, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.02) 240deg, rgba(244, 114, 182, 0.18) 320deg),
          radial-gradient(circle at 48% 40%, rgba(148, 163, 184, 0.25), transparent 62%);
        opacity: 0.24;
      }

      .wing-commander-card .game-cover {
        background:
          radial-gradient(circle at 22% 28%, rgba(96, 165, 250, 0.38), transparent 60%),
          radial-gradient(circle at 70% 68%, rgba(236, 72, 153, 0.22), transparent 62%),
          linear-gradient(160deg, rgba(3, 8, 22, 0.92), rgba(2, 6, 20, 0.98));
      }

      .wing-commander-card .game-cover::after {
        background:
          linear-gradient(120deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0) 60%),
          radial-gradient(circle at 52% 36%, rgba(248, 250, 252, 0.18), transparent 62%);
        opacity: 0.24;
      }

      .game-cover-title {
        position: relative;
        margin: 0;
        font-size: 1.15rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        text-shadow: 0 8px 18px rgba(2, 6, 23, 0.8);
      }

      .game-cover-title span {
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        font-weight: 600;
        color: rgba(226, 232, 240, 0.85);
      }

      .pizzaria-card .game-meta .pill {
        background: rgba(255, 183, 3, 0.22);
      }

      .shootout-card .game-meta .pill {
        background: rgba(244, 114, 182, 0.22);
      }

      .pac-card .game-meta .pill {
        background: rgba(255, 225, 105, 0.22);
        color: rgba(255, 249, 196, 0.92);
      }

      .wolf-card .game-meta .pill {
        background: rgba(96, 165, 250, 0.24);
      }

      .threshold-card .game-meta .pill {
        background: rgba(148, 163, 184, 0.18);
        color: rgba(248, 250, 252, 0.82);
      }

      .threshold-card .game-meta .pill span {
        border-color: rgba(248, 250, 252, 0.32);
      }

      .manhole-card .game-meta .pill {
        background: rgba(125, 211, 252, 0.2);
        color: rgba(224, 242, 254, 0.9);
      }

      .stellar-card .game-meta .pill {
        background: rgba(56, 189, 248, 0.22);
        color: rgba(191, 219, 254, 0.9);
      }

      .stellar-card .game-meta .pill span {
        border-color: rgba(56, 189, 248, 0.38);
      }

      .wing-commander-card .game-meta .pill {
        background: rgba(96, 165, 250, 0.22);
        color: rgba(191, 219, 254, 0.88);
      }

      .wing-commander-card .game-meta .pill span {
        border-color: rgba(59, 130, 246, 0.4);
      }

      .atomfall-card .game-meta .pill {
        background: rgba(16, 185, 129, 0.22);
        color: rgba(204, 251, 241, 0.92);
      }

      .grid.gap-quarter {
        gap: 0.25rem;
      }

      .grid.gap-half {
        gap: 0.5rem;
      }

      .grid.gap-one {
        gap: 1rem;
      }

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

      .game-meta {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: 1.2rem 1.35rem 1.4rem;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(6, 12, 28, 0.8);
        flex: 1 1 auto;
      }

      .game-meta .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.32rem 0.6rem;
        border-radius: 999px;
        font-size: 0.7rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        background: rgba(56, 189, 248, 0.18);
        color: var(--primary);
      }

      .pill span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        border: 1px solid rgba(56, 189, 248, 0.3);
      }

      .game-meta h3 {
        margin: 0;
        font-size: 1rem;
        letter-spacing: 0.04em;
      }

      .card-dropdown {
        background: rgba(15, 23, 42, 0.32);
        border: 1px solid rgba(56, 189, 248, 0.14);
        border-radius: 14px;
        padding: 0.55rem 0.8rem;
      }

      .card-dropdown summary {
        cursor: pointer;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        letter-spacing: 0.03em;
      }

      .card-dropdown summary::after {
        content: "▾";
        font-size: 0.8rem;
        color: var(--accent);
        transition: transform 160ms ease;
      }

      .card-dropdown[open] summary::after {
        transform: rotate(180deg);
      }

      .card-dropdown summary::-webkit-details-marker {
        display: none;
      }

      .card-dropdown + .card-dropdown {
        margin-top: 0.5rem;
      }

      .card-dropdown p {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .game-meta .actions {
        display: inline-flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-top: auto;
      }

      .game-meta .actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.6rem 1.2rem;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.04em;
        transition: transform 150ms ease, box-shadow 150ms ease;
      }

      .game-meta .actions a.primary {
        background: var(--primary);
        color: #020617;
        box-shadow: 0 14px 24px rgba(56, 189, 248, 0.35);
      }

      .game-meta .actions a.secondary {
        border: 1px solid rgba(148, 163, 184, 0.3);
        color: var(--text);
      }

      .game-meta .actions a:hover,
      .game-meta .actions a:focus-visible {
        transform: translateY(-1px);
      }

      .game-meta .actions a.secondary:hover,
      .game-meta .actions a.secondary:focus-visible {
        border-color: var(--secondary);
      }

      .in-progress {
        gap: 1.25rem;
      }

      .in-progress-dropdown {
        padding: 1.35rem 1.6rem;
        border-radius: 22px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(15, 23, 42, 0.42);
        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.3);
      }

      .in-progress-summary {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        margin: 0;
      }

      .in-progress-summary h2 {
        margin: 0;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-size: 1.3rem;
      }

      .in-progress-subhead {
        margin: 0;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .in-progress-summary::after {
        content: "▾";
        font-size: 0.95rem;
        color: var(--secondary);
        transition: transform 160ms ease;
      }

      .in-progress-dropdown[open] .in-progress-summary::after {
        transform: rotate(180deg);
      }

      .in-progress-dropdown summary::-webkit-details-marker {
        display: none;
      }

      .in-progress-content {
        margin-top: 1.25rem;
        padding-top: 1.2rem;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
        display: grid;
        gap: 1.2rem;
      }

      .in-progress-copy {
        margin: 0;
        color: var(--muted);
        max-width: 60ch;
      }

      .in-progress-grid {
        margin-top: 0.2rem;
      }

      .community-subhead {
        margin: 0;
        color: var(--muted);
        font-size: 1rem;
      }

      .community-dropdown {
        margin-top: 0.5rem;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 16px;
        padding: 0.65rem 0.9rem;
      }

      .community-dropdown summary {
        cursor: pointer;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
      }

      .community-dropdown summary::after {
        content: "▾";
        font-size: 0.85rem;
        color: var(--secondary);
        transition: transform 160ms ease;
      }

      .community-dropdown[open] summary::after {
        transform: rotate(180deg);
      }

      .community-dropdown summary::-webkit-details-marker {
        display: none;
      }

      .community-dropdown p {
        margin: 0.6rem 0 0;
        color: var(--muted);
      }

      [data-tooltip] {
        position: relative;
      }

      [data-tooltip]::after,
      [data-tooltip]::before {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease, transform 150ms ease;
      }

      [data-tooltip]::after {
        content: attr(data-tooltip);
        z-index: 5;
        background: var(--tooltip-bg);
        border: 1px solid var(--tooltip-border);
        color: var(--text);
        padding: 0.35rem 0.6rem;
        border-radius: 0.65rem;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
        transform: translate(-50%, 6px);
        bottom: calc(100% + 0.5rem);
        left: 50%;
      }

      [data-tooltip]::before {
        content: "";
        width: 10px;
        height: 10px;
        background: var(--tooltip-bg);
        border-left: 1px solid var(--tooltip-border);
        border-top: 1px solid var(--tooltip-border);
        transform: translate(-50%, 12px) rotate(45deg);
        bottom: calc(100% + 0.1rem);
        left: 50%;
        z-index: 4;
      }

      [data-tooltip]:hover::after,
      [data-tooltip]:hover::before,
      [data-tooltip]:focus-visible::after,
      [data-tooltip]:focus-visible::before {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      [data-tooltip-position="right"]::after {
        bottom: 50%;
        left: calc(100% + 0.75rem);
        transform: translate(-6px, 50%);
      }

      [data-tooltip-position="right"]::before {
        bottom: 50%;
        left: calc(100% + 0.3rem);
        transform: translate(-50%, 50%) rotate(45deg);
      }

      [data-tooltip-position="right"]:hover::after,
      [data-tooltip-position="right"]:hover::before,
      [data-tooltip-position="right"]:focus-visible::after,
      [data-tooltip-position="right"]:focus-visible::before {
        transform: translate(0, 50%);
      }

      .game-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 0%, var(--card-hover-edge) 0%, transparent 60%),
          radial-gradient(circle at 50% 100%, var(--card-hover-glow) 0%, transparent 65%);
        opacity: 0;
        transition: opacity 180ms ease;
        pointer-events: none;
      }

      body[data-fx="enhanced"] .game-card {
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease;
      }

      body[data-fx="enhanced"] .game-card:hover,
      body[data-fx="enhanced"] .game-card.is-hovered {
        transform: translateY(-6px) scale(1.015);
      }

      body[data-fx="enhanced"] .game-card:hover::after,
      body[data-fx="enhanced"] .game-card.is-hovered::after,
      body[data-fx="enhanced"] .game-card:focus-visible::after {
        opacity: 0.65;
      }

      body[data-fx="base"] .game-card {
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
      }

      body[data-fx="base"] .game-card:hover {
        transform: translateY(-2px);
      }

      .tour-overlay {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 2rem;


      .sweet-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.5rem;
      }

      .sweet-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0.8rem;
        border-radius: 0.75rem;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(148, 163, 184, 0.22);
      }

      .sweet-list .dot {
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 999px;
        box-shadow: 0 0 12px currentColor;
      }

      .sweet-list .dot.gumdrop {
        color: #fb7185;
        background: #fb7185;
      }

      .sweet-list .dot.lollipop {
        color: #f97316;
        background: #f97316;
      }

      .sweet-list .dot.macaron {
        color: #38bdf8;
        background: #38bdf8;
      }

      .sweet-list .dot.truffle {
        color: #a855f7;
        background: #a855f7;
      }

      .sweet-list .dot.sundae {
        color: #f87171;
        background: #f87171;
      }

      .digger-card .game-cover {
        background:
          radial-gradient(circle at 22% 30%, rgba(236, 72, 153, 0.38), transparent 60%),
          radial-gradient(circle at 78% 70%, rgba(251, 191, 36, 0.26), transparent 62%),
          linear-gradient(160deg, rgba(40, 12, 48, 0.92), rgba(24, 10, 36, 0.95));
      }

      .digger-card .game-cover::after {
        background:
          repeating-linear-gradient(45deg, rgba(236, 72, 153, 0.18), rgba(236, 72, 153, 0.18) 8px, transparent 8px, transparent 16px),
          radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.18), transparent 60%);
        opacity: 0.32;
      }

      .digger-card .game-meta .pill {
        background: rgba(236, 72, 153, 0.24);
        color: rgba(254, 242, 242, 0.92);
      }