/*
 * game-icons.css — distinct per-game animated icons, extracted from the
 * homepage <style> so category cards can render the SAME icons.
 * Sections: color vars + art-stage + per-game art; icon keyframes;
 * beat/laser art; V36 motion polish + laser demo.
 */

/* --- color vars + art-stage + per-game art (877-1169) --- */
    .cyber { --card-a:37,231,255; --card-b:255,67,209; --card-c:255,255,255; }
    .hotel { --card-a:255,230,109; --card-b:255,122,40; --card-c:255,67,209; }
    .rift { --card-a:255,67,209; --card-b:37,231,255; --card-c:255,230,109; }
    .defense { --card-a:101,255,168; --card-b:255,230,109; --card-c:37,231,255; }
    .maze { --card-a:255,230,109; --card-b:143,91,255; --card-c:37,231,255; }
    .escape { --card-a:37,231,255; --card-b:101,255,168; --card-c:255,230,109; }
    .drag { --card-a:255,230,109; --card-b:255,67,209; --card-c:37,231,255; }
    .puzzle { --card-a:143,91,255; --card-b:37,231,255; --card-c:255,230,109; }
    .beat { --card-a:255,67,209; --card-b:143,91,255; --card-c:255,230,109; }
    .laser { --card-a:101,255,168; --card-b:37,231,255; --card-c:255,230,109; }
    .daily { --card-a:255,230,109; --card-b:101,255,168; --card-c:37,231,255; }
    .soccer { --card-a:101,255,168; --card-b:37,231,255; --card-c:255,67,209; }
    .penalty { --card-a:255,230,109; --card-b:37,231,255; --card-c:101,255,168; }
    .game-art {
      position:relative;
      height:250px;
      overflow:hidden;
      background:
        radial-gradient(circle at 70% 25%, rgba(var(--card-a),.24), transparent 24%),
        radial-gradient(circle at 18% 80%, rgba(var(--card-b),.20), transparent 28%),
        linear-gradient(145deg,rgba(4,6,20,.18),rgba(4,6,20,.78));
    }
    .game-card.featured .game-art { height:280px; }
    .art-stage {
      position:absolute;
      inset:0;
      overflow:hidden;
    }
    .art-stage::before {
      content:"";
      position:absolute;
      inset:45% -12% -18%;
      transform:perspective(440px) rotateX(62deg);
      background:
        linear-gradient(rgba(37,231,255,.24) 2px,transparent 2px) 0 0/100% 34px,
        linear-gradient(90deg,rgba(255,67,209,.24) 2px,transparent 2px) 0 0/48px 100%;
      opacity:.58;
    }
    .art-stage::after {
      content:"";
      position:absolute;
      inset:-45%;
      background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.15),transparent 58%);
      animation:shine 4.5s ease-in-out infinite;
    }
    .game-card:hover .art-stage::before {
      opacity:.82;
      animation:gridRun 1.8s linear infinite;
    }
    .game-card:hover .art-stage::after {
      animation-duration:1.8s;
    }

    /* Unique game icon art */
    .daily-code-grid {
      position:absolute;
      left:50%;
      top:48%;
      width:270px;
      transform:translate(-50%,-50%) rotate(-4deg);
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:10px;
      padding:16px;
      border:2px solid rgba(255,230,109,.42);
      border-radius:16px;
      background:rgba(5,8,24,.68);
      box-shadow:0 0 34px rgba(255,230,109,.22), inset 0 0 30px rgba(37,231,255,.08);
    }
    .daily-code-grid i {
      aspect-ratio:1;
      display:grid;
      place-items:center;
      border-radius:10px;
      color:#07101b;
      font-style:normal;
      font-weight:1000;
      font-size:24px;
      background:linear-gradient(135deg,var(--gold),#fff,var(--green));
      box-shadow:0 0 22px rgba(255,230,109,.35);
      animation:dailyFlip 3s ease-in-out infinite;
      animation-delay:calc(var(--n) * -.32s);
    }
    .daily-code-grid i:nth-child(2),
    .daily-code-grid i:nth-child(5) {
      background:linear-gradient(135deg,var(--cyan),#fff,var(--pink));
      box-shadow:0 0 22px rgba(37,231,255,.35);
    }
    .daily-code-orbit {
      position:absolute;
      left:50%;
      top:48%;
      width:330px;
      height:180px;
      margin:-90px 0 0 -165px;
      border:2px solid rgba(37,231,255,.22);
      border-radius:50%;
      box-shadow:0 0 34px rgba(37,231,255,.22);
      animation:dailyOrbit 7s linear infinite;
    }
    .daily-code-orbit::before,
    .daily-code-orbit::after {
      content:"";
      position:absolute;
      width:18px;
      height:18px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 20px var(--pink);
    }
    .daily-code-orbit::before { left:32px; top:20px; }
    .daily-code-orbit::after { right:38px; bottom:18px; background:var(--cyan); box-shadow:0 0 20px var(--cyan); }

    .rift-ship-icon {
      position:absolute; left:50%; top:50%;
      width:190px; height:76px;
      transform:translate(-50%,-50%) rotate(-10deg);
      filter:drop-shadow(0 0 24px rgba(37,231,255,.82));
      animation:shipHover 4s ease-in-out infinite;
    }
    .rift-ship-icon::before {
      content:""; position:absolute; inset:20px 0 14px;
      background:linear-gradient(90deg,#24e7ff,#fff,#ff43d1);
      clip-path:polygon(0 62%,38% 0,100% 34%,48% 54%,18% 100%);
    }
    .rift-ship-icon::after {
      content:""; position:absolute; left:43%; top:8%;
      width:42px; height:42px; border-radius:50%;
      background:#fff; box-shadow:0 0 28px #24e7ff,0 0 60px #ff43d1;
    }
    .rift-ship-icon i {
      position:absolute; left:8%; top:42%; width:150px; height:28px;
      background:linear-gradient(90deg,transparent,rgba(255,230,109,.75),transparent);
      transform:rotate(-16deg);
    }
    .rift-lane { position:absolute; top:17%; bottom:0; width:4px; background:linear-gradient(transparent,var(--cyan)); transform:rotate(18deg); opacity:.55; }
    .rift-lane.l1 { left:31%; } .rift-lane.l2 { right:31%; background:linear-gradient(transparent,var(--pink)); transform:rotate(-18deg); }
    .rift-gate { position:absolute; top:32%; width:34px; height:86px; border:4px solid var(--cyan); border-radius:10px; box-shadow:0 0 22px var(--cyan); }
    .rift-gate.g1 { left:16%; } .rift-gate.g2 { right:16%; border-color:var(--pink); box-shadow:0 0 22px var(--pink); }
    .shard { position:absolute; width:18px; height:18px; background:linear-gradient(135deg,var(--cyan),var(--pink)); transform:rotate(45deg); box-shadow:0 0 18px var(--cyan); animation:floatShard 3s ease-in-out infinite; }
    .shard.s1 { left:22%; top:22%; } .shard.s2 { right:24%; top:30%; animation-delay:-1s; } .shard.s3 { left:56%; bottom:22%; animation-delay:-2s; }

    .def-grid { position:absolute; inset:22% 16%; border:3px solid rgba(255,230,109,.75); box-shadow:0 0 22px rgba(255,230,109,.4); background:linear-gradient(90deg,transparent 31%,rgba(255,230,109,.55) 32%,transparent 34%,transparent 65%,rgba(255,230,109,.55) 66%,transparent 68%),linear-gradient(transparent 31%,rgba(255,230,109,.55) 32%,transparent 34%,transparent 65%,rgba(255,230,109,.55) 66%,transparent 68%); }
    .core { position:absolute; left:57%; top:45%; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle,#fff,var(--green) 25%,var(--cyan) 50%,transparent 70%); box-shadow:0 0 55px var(--green); animation:corePulse 2s infinite; }
    .tower { position:absolute; width:46px; height:46px; border-radius:12px; border:4px solid var(--cyan); box-shadow:0 0 24px var(--cyan); }
    .tower.t1 { left:22%; top:30%; border-color:var(--gold); box-shadow:0 0 24px var(--gold); } .tower.t2 { left:38%; bottom:30%; } .tower.t3 { right:25%; top:26%; border-radius:50%; border-color:var(--green); box-shadow:0 0 24px var(--green); }
    .drone { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--pink); box-shadow:0 0 20px var(--pink); animation:droneMove 4s ease-in-out infinite; }
    .drone.d1 { left:68%; top:28%; } .drone.d2 { left:24%; bottom:28%; animation-delay:-1.5s; }
    .laser-line { position:absolute; left:42%; top:39%; width:210px; height:4px; background:linear-gradient(90deg,var(--gold),var(--cyan)); transform:rotate(-20deg); box-shadow:0 0 20px var(--cyan); }

    .maze-wall { position:absolute; background:rgba(255,230,109,.75); box-shadow:0 0 18px rgba(255,230,109,.55); }
    .maze-wall.m1 { left:18%; top:24%; width:64%; height:8px; } .maze-wall.m2 { left:18%; top:24%; width:8px; height:46%; } .maze-wall.m3 { right:18%; top:24%; width:8px; height:46%; } .maze-wall.m4 { left:18%; bottom:30%; width:64%; height:8px; }
    .player-orb { position:absolute; left:34%; top:48%; width:30px; height:30px; border-radius:50%; background:var(--gold); box-shadow:0 0 28px var(--gold); animation:mazePlayer 4s ease-in-out infinite; }
    .shadow-orb { position:absolute; left:57%; top:57%; width:42px; height:42px; border-radius:50%; background:rgba(37,231,255,.7); box-shadow:0 0 32px var(--cyan); filter:blur(.2px); }
    .light-dot { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold); }
    .light-dot.ld1 { right:26%; top:36%; } .light-dot.ld2 { left:48%; top:38%; }

    .road { position:absolute; left:15%; right:15%; top:18%; bottom:-10%; background:linear-gradient(to bottom,rgba(37,231,255,.10),rgba(0,0,0,.25)); clip-path:polygon(32% 0,68% 0,100% 100%,0 100%); }
    .lane-line { position:absolute; top:20%; bottom:0; width:4px; background:linear-gradient(var(--pink),transparent); box-shadow:0 0 22px var(--pink); }
    .lane-line.left { left:37%; transform:rotate(8deg); } .lane-line.right { right:37%; transform:rotate(-8deg); background:linear-gradient(var(--cyan),transparent); box-shadow:0 0 22px var(--cyan); }
    .escape-player { position:absolute; left:50%; top:52%; width:62px; height:62px; margin:-31px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--pink)); box-shadow:0 0 38px var(--pink); animation:shipHover 3.5s ease-in-out infinite; }
    .obstacle { position:absolute; width:38px; height:96px; border:4px solid var(--pink); border-radius:12px; box-shadow:0 0 24px var(--pink); }
    .obstacle.o1 { left:26%; top:28%; border-color:var(--cyan); box-shadow:0 0 24px var(--cyan); } .obstacle.o2 { right:25%; top:28%; }
    .coin { position:absolute; width:22px; height:22px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold); }
    .coin.c1 { left:44%; top:28%; } .coin.c2 { right:42%; top:68%; }

    .drag-road { position:absolute; left:-5%; right:-5%; top:52%; height:72px; background:linear-gradient(90deg,rgba(255,67,209,.12),rgba(37,231,255,.18)); border-top:2px solid rgba(37,231,255,.35); border-bottom:2px solid rgba(255,67,209,.24); }
    .speed-line { position:absolute; height:4px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 18px var(--cyan); animation:speedRun 1.3s linear infinite; }
    .speed-line.sp1 { left:10%; right:30%; top:34%; } .speed-line.sp2 { left:25%; right:8%; top:44%; animation-delay:-.4s; } .speed-line.sp3 { left:4%; right:45%; top:68%; animation-delay:-.8s; }
    .car-body { position:absolute; left:47%; top:50%; width:170px; height:70px; transform:translate(-50%,-50%); filter:drop-shadow(0 0 25px var(--gold)); animation:carJolt 1.6s ease-in-out infinite; }
    .car-body::before { content:""; position:absolute; inset:18px 0; background:linear-gradient(90deg,var(--gold),#fff,var(--pink)); clip-path:polygon(0 55%,15% 25%,62% 12%,100% 44%,86% 78%,20% 86%); }
    .car-body::after { content:""; position:absolute; left:50%; top:14px; width:54px; height:26px; border-radius:12px 12px 4px 4px; background:rgba(37,231,255,.9); box-shadow:0 0 22px var(--cyan); }
    .car-body i { position:absolute; left:-34px; top:33px; width:54px; height:20px; background:linear-gradient(90deg,transparent,var(--pink)); filter:blur(4px); }
    .tachometer { position:absolute; right:16%; bottom:24%; width:86px; height:46px; border-radius:90px 90px 0 0; border:4px solid rgba(255,230,109,.7); border-bottom:0; box-shadow:0 0 20px var(--gold); }
    .flame { position:absolute; left:28%; top:50%; width:54px; height:28px; background:linear-gradient(90deg,transparent,var(--pink),var(--gold)); filter:blur(4px); }

    .puzzle-board { position:absolute; left:24%; top:20%; width:52%; height:58%; border:3px solid rgba(37,231,255,.45); border-radius:18px; box-shadow:0 0 30px rgba(37,231,255,.22); }
    .tile { position:absolute; width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,var(--violet),var(--cyan)); box-shadow:0 0 25px var(--violet); animation:tilePop 3s ease-in-out infinite; }
    .tile.p1 { left:30%; top:30%; } .tile.p2 { left:45%; top:30%; background:linear-gradient(135deg,var(--pink),var(--gold)); animation-delay:-.5s; } .tile.p3 { left:60%; top:30%; background:linear-gradient(135deg,var(--green),var(--cyan)); animation-delay:-1s; } .tile.p4 { left:38%; top:55%; background:linear-gradient(135deg,var(--gold),var(--pink)); animation-delay:-1.5s; } .tile.p5 { left:54%; top:55%; background:linear-gradient(135deg,var(--cyan),var(--violet)); animation-delay:-2s; }
    .combo-line { position:absolute; height:4px; background:linear-gradient(90deg,var(--cyan),var(--pink)); box-shadow:0 0 18px var(--cyan); }
    .combo-line.cl1 { left:34%; top:42%; width:180px; } .combo-line.cl2 { left:48%; top:33%; height:120px; width:4px; }


    /* Added game-card art, preserving the original Neon Arcade style and sound script */
    .cyber-puck { position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 38%,#3158ff 72%); box-shadow:0 0 34px var(--cyan),0 0 65px rgba(255,67,209,.35); animation:cyberPuck 2.6s ease-in-out infinite; }
    .cyber-striker { position:absolute; width:150px; height:54px; border-radius:26px; background:linear-gradient(90deg,var(--cyan),#fff,var(--pink)); box-shadow:0 0 32px var(--cyan); top:50%; transform:translateY(-50%) skewX(-10deg); animation:cyberStriker 2.6s ease-in-out infinite; }
    .cyber-striker.left { left:10%; } .cyber-striker.right { right:10%; animation-delay:-1.3s; box-shadow:0 0 32px var(--pink); }
    .cyber-goal { position:absolute; left:18%; right:18%; height:18px; border-radius:14px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 24px var(--cyan); }
    .cyber-goal.top { top:16%; background:linear-gradient(90deg,transparent,var(--pink),transparent); box-shadow:0 0 24px var(--pink); } .cyber-goal.bottom { bottom:16%; }
    @keyframes cyberPuck { 0%,100%{transform:translate(-150px,-8px) scale(.9)} 50%{transform:translate(150px,8px) scale(1.1)} }
    @keyframes cyberStriker { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35); transform:translateY(-50%) translateX(18px) skewX(-10deg)} }

    .soccer-goal {
      position:absolute;
      left:20%;
      right:20%;
      top:14%;
      height:82px;
      border:5px solid rgba(255,255,255,.86);
      border-bottom:0;
      box-shadow:0 0 26px rgba(37,231,255,.52), inset 0 0 22px rgba(37,231,255,.12);
    }
    .soccer-goal::before {
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0/28px 100%,
        linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px) 0 0/100% 22px;
    }
    .soccer-keeper {
      position:absolute;
      left:50%;
      top:34%;
      width:138px;
      height:34px;
      border-radius:22px;
      background:linear-gradient(90deg,var(--pink),#fff,var(--cyan));
      box-shadow:0 0 28px var(--pink),0 0 36px rgba(37,231,255,.35);
      transform:translateX(-50%);
      animation:soccerKeeper 2.4s ease-in-out infinite;
    }
    .soccer-defender {
      position:absolute;
      left:50%;
      width:116px;
      height:26px;
      border-radius:18px;
      background:linear-gradient(90deg,var(--gold),#fff,var(--green));
      box-shadow:0 0 26px var(--gold);
      animation:soccerDefender 2.8s ease-in-out infinite;
    }
    .soccer-defender.d1 { top:56%; animation-delay:-.4s; }
    .soccer-defender.d2 { top:70%; width:92px; animation-delay:-1.7s; background:linear-gradient(90deg,var(--cyan),#fff,var(--pink)); box-shadow:0 0 26px var(--cyan); }
    .soccer-ball {
      position:absolute;
      left:50%;
      bottom:13%;
      width:48px;
      height:48px;
      margin-left:-24px;
      border-radius:50%;
      background:radial-gradient(circle at 32% 28%,#fff,#dfffff 28%,var(--cyan) 62%,#1844ff);
      box-shadow:0 0 28px var(--cyan),0 0 58px rgba(255,67,209,.36);
      animation:soccerBall 2.2s ease-in-out infinite;
    }
    .soccer-target {
      position:absolute;
      right:27%;
      top:20%;
      width:58px;
      height:58px;
      border-radius:50%;
      border:4px solid var(--gold);
      box-shadow:0 0 26px var(--gold), inset 0 0 18px rgba(255,230,109,.28);
      animation:targetPulse 1.5s ease-in-out infinite;
    }
    .soccer-curve {
      position:absolute;
      left:38%;
      top:38%;
      width:190px;
      height:160px;
      border-top:4px solid rgba(101,255,168,.78);
      border-right:4px solid rgba(101,255,168,.42);
      border-radius:50%;
      transform:rotate(-22deg);
      box-shadow:0 0 22px rgba(101,255,168,.45);
    }
    @keyframes soccerKeeper { 0%,100%{transform:translateX(-58%)} 50%{transform:translateX(-8%)} }
    @keyframes soccerDefender { 0%,100%{transform:translateX(-105%)} 50%{transform:translateX(15%)} }
    @keyframes soccerBall { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(88px,-116px) scale(.72)} }
    @keyframes targetPulse { 50%{transform:scale(1.12); filter:brightness(1.3)} }

    .penalty-goal { position:absolute; left:18%; right:18%; top:15%; height:92px; border:5px solid rgba(255,255,255,.88); box-shadow:0 0 28px rgba(255,230,109,.42), inset 0 0 24px rgba(37,231,255,.13); }
    .penalty-goal::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 0/30px 100%,linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0/100% 23px; }
    .penalty-keeper { position:absolute; left:50%; top:37%; width:128px; height:32px; border-radius:20px; background:linear-gradient(90deg,var(--gold),#fff,var(--cyan)); box-shadow:0 0 28px var(--gold),0 0 42px rgba(37,231,255,.28); animation:penaltyKeeper 2.2s ease-in-out infinite; }
    .penalty-hot { position:absolute; right:24%; top:22%; width:64px; height:64px; border:4px solid var(--gold); border-radius:50%; box-shadow:0 0 28px var(--gold), inset 0 0 18px rgba(255,230,109,.2); animation:targetPulse 1.3s ease-in-out infinite; }
    .penalty-ball { position:absolute; left:50%; bottom:12%; width:48px; height:48px; margin-left:-24px; border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff,#fff5c7 26%,var(--gold) 62%,#ff7a40); box-shadow:0 0 28px var(--gold),0 0 58px rgba(37,231,255,.28); animation:penaltyShot 2.35s ease-in-out infinite; }
    .penalty-meter { position:absolute; left:24%; right:24%; bottom:24%; height:14px; border-radius:999px; background:rgba(0,0,0,.35); box-shadow:inset 0 0 12px rgba(0,0,0,.35),0 0 18px rgba(37,231,255,.16); }
    .penalty-meter::before { content:""; display:block; width:74%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),#fff,var(--pink)); box-shadow:0 0 20px var(--cyan); animation:penaltyMeter 1.6s ease-in-out infinite; }
    @keyframes penaltyKeeper { 0%,100%{transform:translateX(-105%) rotate(-4deg)} 50%{transform:translateX(22%) rotate(4deg)} }
    @keyframes penaltyShot { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(96px,-132px) scale(.72)} }
    @keyframes penaltyMeter { 0%,100%{width:38%} 50%{width:92%} }

    .hotel-tower-icon { position:absolute; left:50%; top:50%; width:210px; height:172px; transform:translate(-50%,-50%); border-radius:24px 24px 12px 12px; background:linear-gradient(180deg,rgba(255,230,109,.95),rgba(255,122,40,.72)); border:2px solid rgba(255,230,109,.65); box-shadow:0 0 44px rgba(255,230,109,.5), inset 0 0 35px rgba(255,255,255,.15); animation:hotelGlow 3s ease-in-out infinite; }
    .hotel-tower-icon::before { content:"\2605\2605\2605\2605\2605"; position:absolute; top:-30px; left:0; right:0; text-align:center; color:var(--gold); font-weight:1000; letter-spacing:7px; text-shadow:0 0 18px var(--gold); }
    .hotel-tower-icon::after { content:""; position:absolute; inset:24px 22px 46px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 24px,transparent 24px 42px),repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 24px,transparent 24px 42px); border-radius:14px; }
    .hotel-door { position:absolute; left:50%; bottom:0; width:54px; height:58px; transform:translateX(-50%); border-radius:20px 20px 0 0; background:linear-gradient(180deg,#fff,var(--pink)); box-shadow:0 0 24px var(--pink); z-index:3; }
    .hotel-guest { position:absolute; width:30px; height:30px; border-radius:50%; background:var(--cyan); box-shadow:0 0 22px var(--cyan); animation:guestFloat 2.2s ease-in-out infinite; }
    .hotel-guest.g1 { left:19%; bottom:22%; } .hotel-guest.g2 { right:18%; bottom:31%; animation-delay:-1.1s; background:var(--pink); box-shadow:0 0 22px var(--pink); }
    @keyframes hotelGlow { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-52%) scale(1.035)} }
    @keyframes guestFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* --- icon keyframes (3062-3128) --- */
    @keyframes gridRun { from { background-position:0 0,0 0; } to { background-position:0 44px,72px 0; } }
    @keyframes starDrift { to { background-position:115px 115px,205px 240px,320px 245px; } }
    @keyframes beamSweep { 0%,100% { opacity:.08; transform:translateX(-80px) rotate(62deg); } 50% { opacity:.42; transform:translateX(130px) rotate(62deg); } }
    @keyframes drift { 50% { transform:translate3d(18px,-22px,0); } }
    @keyframes iconPulse { 50% { transform:translateY(-2px) scale(1.04); filter:saturate(1.25); } }
    @keyframes quickPulse { 50% { box-shadow:0 18px 46px rgba(var(--quick-a),.10), inset 0 0 42px rgba(var(--quick-a),.13); } }
    @keyframes hologram { to { background-position:300% 0; } }
    @keyframes shine { 0%,60%,100% { transform:translateX(-70%) rotate(18deg); } 78% { transform:translateX(85%) rotate(18deg); } }
    @keyframes portalFloat { 0%,100% { transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) translateY(0); } 50% { transform:perspective(1000px) rotateY(-3deg) rotateX(5deg) translateY(-10px); } }
    @keyframes portalSpin { to { transform:rotate(360deg); } }
    @keyframes coreRing { 0% { opacity:.15; transform:scale(.82); } 48% { opacity:.75; } 100% { opacity:0; transform:scale(1.34); } }
    @keyframes marqueePulse { 50% { filter:brightness(1.24) saturate(1.18); text-shadow:0 0 22px rgba(255,255,255,.62),0 0 42px rgba(255,67,209,.35); } }
    @keyframes screenSweep { 0%,60%,100% { transform:translateX(-68%) rotate(13deg); } 78% { transform:translateX(66%) rotate(13deg); } }
    @keyframes previewCycle { 0%,21% { opacity:1; transform:scale(1); } 25%,100% { opacity:0; transform:scale(1.04); } }
    @keyframes screenIconFloat { 50% { transform:translateY(-9px) skewX(-8deg) scale(1.03); filter:saturate(1.25); } }
    @keyframes joystickTilt { 50% { transform:rotate(5deg) translateY(-3px); } }
    @keyframes buttonBlink { 50% { filter:brightness(1.35); transform:translateY(-2px); } }
    @keyframes posterGlow { 50% { filter:brightness(1.25) saturate(1.25); transform:translateY(-8px); } }
    @keyframes revealUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
    @keyframes dailyFlip { 0%,100% { transform:rotateX(0deg); } 50% { transform:rotateX(180deg); filter:brightness(1.25); } }
    @keyframes dailyOrbit { to { transform:rotate(360deg); } }
    @keyframes shipHover { 0%,100% { transform:translate(-50%,-50%) rotate(-10deg); } 50% { transform:translate(-50%,-60%) rotate(-5deg); } }
    @keyframes floatShard { 50% { transform:translateY(-12px) rotate(45deg); filter:brightness(1.3); } }
    @keyframes corePulse { 50% { transform:translate(-50%,-50%) scale(1.12); filter:brightness(1.35); } }
    .core { transform:translate(-50%,-50%); }
    @keyframes droneMove { 50% { transform:translate(-34px, 20px); } }
    @keyframes mazePlayer { 50% { transform:translate(70px,32px); } }
    @keyframes speedRun { from { transform:translateX(90px); opacity:.15; } 50% { opacity:1; } to { transform:translateX(-120px); opacity:.15; } }
    @keyframes carJolt { 50% { transform:translate(-50%,-54%) scale(1.03); } }
    @keyframes tilePop { 50% { transform:translateY(-8px) scale(1.05); filter:brightness(1.25); } }
    @keyframes beatFall { from { transform:translateY(-80px); opacity:.15; } 18%,78% { opacity:1; } to { transform:translateY(210px); opacity:.18; } }
    @keyframes laserPulse { 50% { filter:brightness(1.4); transform:rotate(-22deg) scaleX(1.04); } }
    @keyframes hubSweep { 0%,58%,100% { transform:translateX(-110%); } 72% { transform:translateX(110%); } }
    @keyframes skyAurora { 0%,100% { transform:rotate(0deg) scale(1); opacity:.42; } 50% { transform:rotate(8deg) scale(1.08); opacity:.72; } }
    @keyframes neonRain { from { background-position:9% -100%, 42% -60%, 72% -30%; } to { background-position:9% 100%, 42% 140%, 72% 170%; } }
    @keyframes trailSweep { 0%,100% { background-position:-120% 0, 140% 0; opacity:.18; } 50% { background-position:120% 0, -80% 0; opacity:.34; } }
    @keyframes scanDrift { from { background-position:0 0, 0 -32%; } to { background-position:0 0, 0 132%; } }
    @keyframes windowBlink { 0%,100% { opacity:.34; } 50% { opacity:.62; } }
    @keyframes artFramePulse { 50% { box-shadow:0 0 36px rgba(var(--card-a),.18), inset 0 0 38px rgba(var(--card-b),.12); } }
    @keyframes artScan { 0%,55%,100% { transform:rotate(-13deg) translateX(-38%); } 72% { transform:rotate(-13deg) translateX(38%); } }
    @keyframes dailyBoardLift { 50% { transform:translate(-50%,-54%) rotate(2deg); filter:brightness(1.12); } }
    @keyframes dailyScan { 0%,62%,100% { transform:translateY(-120%) rotate(4deg); } 76% { transform:translateY(190%) rotate(4deg); } }
    @keyframes tileGlint { 0%,54%,100% { transform:translateX(-130%); } 70% { transform:translateX(130%); } }
    @keyframes gateCharge { 50% { filter:brightness(1.45); transform:translateY(-4px) scale(1.06); } }
    @keyframes riftExhaust { 50% { opacity:.65; filter:blur(2px) brightness(1.5); transform:translateX(-8px) rotate(-16deg) scaleX(1.16); } }
    @keyframes shardSpark { 50% { box-shadow:0 0 26px var(--gold),0 0 40px rgba(37,231,255,.34); } }
    @keyframes goalBarFlash { 50% { filter:brightness(1.45); transform:scaleX(1.08); } }
    @keyframes ballSpin { to { transform:rotate(360deg); } }
    @keyframes curveTrace { 50% { filter:brightness(1.45); transform:rotate(-12deg) scale(1.04); opacity:.9; } }
    @keyframes targetEcho { from { opacity:.72; transform:scale(.7); } to { opacity:0; transform:scale(1.45); } }
    @keyframes goalPulse { 50% { filter:brightness(1.5); transform:scaleX(1.04); } }
    @keyframes hotelWindowGlow { 50% { filter:brightness(1.35); box-shadow:inset 0 0 34px rgba(255,255,255,.18); } }
    @keyframes doorPulse { 50% { filter:brightness(1.35); transform:translateX(-50%) scaleY(1.08); } }
    @keyframes towerCharge { 50% { transform:scale(1.3); opacity:.35; } }
    @keyframes droneBlink { 50% { filter:brightness(1.5); box-shadow:0 0 30px var(--pink); } }
    @keyframes shadowBreathe { 50% { filter:brightness(1.2); transform:scale(1.14); } }
    @keyframes lightPing { 50% { transform:scale(1.25); filter:brightness(1.45); } }
    @keyframes coinSpin { 50% { transform:rotateY(180deg) scale(1.08); } }
    @keyframes obstaclePulse { 50% { filter:brightness(1.25); transform:translateY(8px); } }
    @keyframes flameFlicker { 50% { transform:scaleX(1.22); opacity:.78; filter:blur(6px) brightness(1.35); } }
    @keyframes needleSweep { 0%,100% { transform:rotate(-42deg); } 50% { transform:rotate(44deg); } }
    @keyframes comboSurge { 50% { filter:brightness(1.5); box-shadow:0 0 26px var(--pink); } }
    @keyframes speakerWave { from { opacity:.72; transform:scale(.75); } to { opacity:0; transform:scale(1.35); } }
    @keyframes laneGlow { 50% { opacity:.3; transform:translateY(120%); } }
    @keyframes labScan { 0%,58%,100% { transform:translateX(-100%); } 76% { transform:translateX(100%); } }
    @keyframes photonRun { to { transform:translateX(110%); } }
    @keyframes emitterCharge { 50% { transform:translateY(-50%) scale(1.3); filter:brightness(1.5); } }

/* --- beat + laser base art (3548-3674) --- */
    .beat-board {
      position:absolute;
      left:16%;
      right:16%;
      top:14%;
      bottom:16%;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:8px;
      padding:10px;
      border:3px solid rgba(255,255,255,.18);
      border-radius:18px;
      background:rgba(0,0,0,.18);
      box-shadow:0 0 34px rgba(37,231,255,.20), inset 0 0 24px rgba(255,255,255,.05);
    }
    .beat-lane {
      position:relative;
      overflow:hidden;
      border-radius:14px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
    }
    .beat-lane::after {
      content:"";
      position:absolute;
      left:8px;
      right:8px;
      bottom:20%;
      height:5px;
      border-radius:999px;
      background:currentColor;
      box-shadow:0 0 18px currentColor;
    }
    .beat-lane.b1 { color:var(--cyan); }
    .beat-lane.b2 { color:var(--pink); }
    .beat-lane.b3 { color:var(--gold); }
    .beat-lane.b4 { color:var(--green); }
    .beat-note {
      position:absolute;
      left:16%;
      right:16%;
      height:26px;
      border-radius:9px;
      background:linear-gradient(90deg,currentColor,#fff,currentColor);
      box-shadow:0 0 22px currentColor;
      animation:beatFall 2.2s linear infinite;
    }
    .beat-note.n1 { top:10%; }
    .beat-note.n2 { top:34%; animation-delay:-.7s; }
    .beat-note.n3 { top:58%; animation-delay:-1.3s; }
    .speaker-ring {
      position:absolute;
      left:50%;
      top:50%;
      width:120px;
      height:120px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      border:4px solid rgba(255,255,255,.22);
      box-shadow:0 0 30px rgba(255,230,109,.35), inset 0 0 24px rgba(37,231,255,.24);
      animation:corePulse 2s ease-in-out infinite;
    }

    .laser .game-art {
      background:
        radial-gradient(circle at 74% 34%, rgba(101,255,168,.28), transparent 16%),
        radial-gradient(circle at 24% 60%, rgba(37,231,255,.24), transparent 20%),
        linear-gradient(180deg, rgba(5,8,28,.12), rgba(7,7,24,.84)),
        linear-gradient(115deg, rgba(37,231,255,.20), rgba(255,230,109,.14));
    }
    .laser-board {
      position:absolute;
      left:18%;
      right:18%;
      top:18%;
      bottom:18%;
      border:3px solid rgba(37,231,255,.38);
      border-radius:18px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 20% 100%,
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 100% 20%,
        rgba(0,0,0,.18);
      box-shadow:0 0 34px rgba(37,231,255,.24), inset 0 0 28px rgba(255,255,255,.05);
    }
    .laser-beam {
      position:absolute;
      left:12%;
      top:48%;
      width:76%;
      height:6px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--cyan),#fff,var(--pink),var(--green));
      box-shadow:0 0 22px var(--cyan), 0 0 34px var(--pink);
      transform:rotate(-22deg);
      animation:laserPulse 1.7s ease-in-out infinite;
    }
    .laser-mirror {
      position:absolute;
      width:54px;
      height:9px;
      border-radius:999px;
      background:#fff;
      box-shadow:0 0 20px var(--cyan);
    }
    .laser-mirror.m1 { left:28%; top:36%; transform:rotate(-45deg); }
    .laser-mirror.m2 { right:30%; bottom:32%; transform:rotate(45deg); box-shadow:0 0 20px var(--gold); }
    .laser-reactor {
      position:absolute;
      right:18%;
      top:22%;
      width:64px;
      height:64px;
      border-radius:50%;
      border:5px solid var(--green);
      box-shadow:0 0 30px var(--green), inset 0 0 20px rgba(101,255,168,.35);
      animation:corePulse 2.2s ease-in-out infinite;
    }
    .laser-emitter {
      position:absolute;
      left:15%;
      bottom:24%;
      width:58px;
      height:38px;
      border-radius:12px;
      background:linear-gradient(90deg,var(--cyan),#fff);
      box-shadow:0 0 24px var(--cyan);
    }

/* --- V36 motion polish + laser demo (3676-4039) --- */
    /* V36: cinematic motion polish for game icons */
    .game-art {
      isolation:isolate;
      box-shadow:inset 0 0 0 1px rgba(var(--card-a),.08), inset 0 0 48px rgba(var(--card-b),.07);
    }
    .game-art::before,
    .game-art::after {
      content:"";
      position:absolute;
      pointer-events:none;
      z-index:5;
    }
    .game-art::before {
      inset:13px;
      border:1px solid rgba(var(--card-a),.18);
      border-radius:12px;
      box-shadow:0 0 26px rgba(var(--card-a),.10), inset 0 0 28px rgba(var(--card-b),.07);
      animation:artFramePulse 4.8s ease-in-out infinite;
    }
    .game-art::after {
      left:-42%;
      right:-42%;
      top:22%;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),rgba(var(--card-a),.42),transparent);
      box-shadow:0 0 22px rgba(var(--card-a),.32);
      transform:rotate(-13deg) translateX(-28%);
      opacity:.56;
      animation:artScan 4.6s ease-in-out infinite;
    }
    .game-card:hover .game-art::before { border-color:rgba(var(--card-a),.34); animation-duration:2.2s; }
    .game-card:hover .game-art::after { animation-duration:1.5s; opacity:.86; }
    .game-card:hover .game-art { filter:saturate(1.12) brightness(1.05); }
    .game-card.has-game-thumb .game-art {
      background:
        linear-gradient(180deg, rgba(3,3,13,.10), rgba(3,3,13,.68)),
        var(--thumb-image) center / cover no-repeat,
        radial-gradient(circle at 20% 20%, rgba(var(--card-a),.22), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(var(--card-b),.18), transparent 30%),
        rgba(255,255,255,.04);
    }
    .game-card.has-game-thumb .art-stage {
      opacity:.48;
      filter:saturate(1.16);
    }
    .game-card.has-game-thumb .cover-brand {
      background:linear-gradient(180deg, rgba(4,7,22,.12), rgba(4,7,22,.82));
      text-shadow:0 2px 18px rgba(0,0,0,.8);
    }

    .daily-code-grid {
      overflow:hidden;
      animation:dailyBoardLift 4.6s ease-in-out infinite;
    }
    .daily-code-grid::before {
      content:"";
      position:absolute;
      left:-30%;
      right:-30%;
      top:0;
      height:46%;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
      transform:translateY(-120%) rotate(4deg);
      animation:dailyScan 3.8s ease-in-out infinite;
    }
    .daily-code-grid i {
      position:relative;
      overflow:hidden;
    }
    .daily-code-grid i::after {
      content:"";
      position:absolute;
      inset:-20%;
      background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65), transparent 62%);
      transform:translateX(-130%);
      animation:tileGlint 3.6s ease-in-out infinite;
      animation-delay:calc(var(--n) * -.24s);
    }
    .daily-code-orbit {
      border-top-color:rgba(255,230,109,.42);
      border-right-color:rgba(255,67,209,.34);
    }

    .rift-gate {
      animation:gateCharge 2.5s ease-in-out infinite;
    }
    .rift-gate.g2 { animation-delay:-1.25s; }
    .rift-ship-icon i {
      animation:riftExhaust 1.4s ease-in-out infinite;
    }
    .shard {
      animation-name:floatShard, shardSpark;
      animation-duration:3s, 1.4s;
      animation-timing-function:ease-in-out, ease-in-out;
      animation-iteration-count:infinite, infinite;
    }

    .soccer-goal::after {
      content:"";
      position:absolute;
      left:-8%;
      right:-8%;
      bottom:-4px;
      height:6px;
      border-radius:999px;
      background:linear-gradient(90deg,transparent,var(--cyan),#fff,var(--pink),transparent);
      box-shadow:0 0 24px rgba(37,231,255,.5);
      animation:goalBarFlash 2s ease-in-out infinite;
    }
    .soccer-ball::after {
      content:"";
      position:absolute;
      inset:8px;
      border-radius:50%;
      border:2px solid rgba(4,7,20,.55);
      border-left-color:transparent;
      border-bottom-color:transparent;
      animation:ballSpin .75s linear infinite;
    }
    .soccer-curve {
      animation:curveTrace 1.9s ease-in-out infinite;
    }
    .soccer-target::before,
    .soccer-target::after {
      content:"";
      position:absolute;
      inset:-12px;
      border-radius:50%;
      border:2px solid rgba(255,230,109,.48);
      animation:targetEcho 1.7s ease-out infinite;
    }
    .soccer-target::after { animation-delay:.8s; }

    .cyber-puck::after {
      content:"";
      position:absolute;
      right:72%;
      top:40%;
      width:115px;
      height:16px;
      border-radius:999px;
      background:linear-gradient(90deg,transparent,rgba(37,231,255,.55));
      filter:blur(3px);
      transform:rotate(5deg);
    }
    .cyber-goal {
      animation:goalPulse 2.2s ease-in-out infinite;
    }

    .hotel-tower-icon::after {
      animation:hotelWindowGlow 2.8s ease-in-out infinite;
    }
    .hotel-door {
      animation:doorPulse 2s ease-in-out infinite;
    }

    .defense .tower::after {
      content:"";
      position:absolute;
      inset:9px;
      border-radius:inherit;
      background:rgba(255,255,255,.18);
      box-shadow:0 0 18px currentColor;
      animation:towerCharge 1.8s ease-in-out infinite;
    }
    .defense .laser-line {
      animation:laserPulse 1.1s ease-in-out infinite;
    }
    .defense .drone {
      animation-name:droneMove, droneBlink;
      animation-duration:4s, 1.2s;
      animation-timing-function:ease-in-out, ease-in-out;
      animation-iteration-count:infinite, infinite;
    }

    .maze .shadow-orb {
      animation:shadowBreathe 2.4s ease-in-out infinite;
    }
    .maze .light-dot {
      animation:lightPing 1.8s ease-in-out infinite;
    }

    .escape .coin {
      animation:coinSpin 1.2s linear infinite;
    }
    .escape .obstacle {
      animation:obstaclePulse 1.8s ease-in-out infinite;
    }

    .drag .flame {
      animation:flameFlicker .6s ease-in-out infinite;
    }
    .drag .tachometer::after {
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      width:4px;
      height:44px;
      border-radius:999px;
      background:var(--pink);
      box-shadow:0 0 18px var(--pink);
      transform-origin:50% 100%;
      animation:needleSweep 1.2s ease-in-out infinite;
    }

    .puzzle .combo-line {
      animation:comboSurge 1.5s ease-in-out infinite;
    }
    .beat .speaker-ring::after {
      content:"";
      position:absolute;
      inset:-18px;
      border-radius:50%;
      border:2px solid rgba(255,230,109,.22);
      animation:speakerWave 1.4s ease-out infinite;
    }
    .beat .beat-lane::before {
      content:"";
      position:absolute;
      left:8px;
      right:8px;
      top:8%;
      height:18%;
      border-radius:999px;
      background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);
      animation:laneGlow 2s ease-in-out infinite;
    }

    .laser-board::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,transparent,rgba(101,255,168,.13),transparent);
      transform:translateX(-100%);
      animation:labScan 2.6s ease-in-out infinite;
    }
    .laser-beam::before,
    .laser-beam::after {
      content:"";
      position:absolute;
      inset:-8px 0;
      border-radius:999px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
      transform:translateX(-110%);
      animation:photonRun 1.05s linear infinite;
    }
    .laser-beam::after { animation-delay:.52s; }
    .laser-emitter::after {
      content:"";
      position:absolute;
      right:-13px;
      top:50%;
      width:22px;
      height:22px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 0 24px var(--cyan),0 0 42px var(--green);
      transform:translateY(-50%);
      animation:emitterCharge 1.2s ease-in-out infinite;
    }

    /* DEMO: fully-alive Laser Lab card (sample upgrade) */
    .laser .laser-board {
      animation:laserBoardEnergize 3.4s ease-in-out infinite;
    }
    .laser .laser-board::before {
      content:"";
      position:absolute;
      left:0; right:0;
      top:0;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg,transparent,var(--green),#fff,var(--cyan),transparent);
      box-shadow:0 0 18px rgba(101,255,168,.6);
      opacity:.85;
      animation:laserBoardSweep 3s linear infinite;
    }
    .laser .laser-mirror.m1 {
      transform-origin:50% 50%;
      animation:laserMirrorTiltA 2.8s ease-in-out infinite;
    }
    .laser .laser-mirror.m2 {
      transform-origin:50% 50%;
      animation:laserMirrorTiltB 2.8s ease-in-out infinite;
    }
    .laser .laser-mirror::after {
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:inherit;
      box-shadow:0 0 16px var(--cyan);
      opacity:.5;
      animation:laserMirrorGlow 1.4s ease-in-out infinite;
    }
    .laser .laser-beam {
      animation:laserBeamSweep 2.6s ease-in-out infinite;
    }
    .laser .laser-emitter {
      animation:emitterRecoil 1.2s ease-in-out infinite;
    }
    .laser .laser-reactor::after {
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:50%;
      border:2px solid rgba(101,255,168,.5);
      animation:targetEcho 1.9s ease-out infinite;
    }
    .laser .art-stage .laser-spark {
      position:absolute;
      width:8px;
      height:8px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 0 14px var(--cyan),0 0 22px var(--green);
      opacity:.9;
    }
    .laser .art-stage .laser-spark.k1 { left:30%; top:42%; animation:sparkFloatA 3.6s ease-in-out infinite; }
    .laser .art-stage .laser-spark.k2 { left:62%; top:34%; animation:sparkFloatB 4.2s ease-in-out infinite; }
    .laser .art-stage .laser-spark.k3 { left:48%; top:62%; animation:sparkFloatA 3.1s ease-in-out infinite reverse; }
    .game-card.laser:hover .laser-board,
    .game-card.laser:hover .laser-beam,
    .game-card.laser:hover .laser-mirror.m1,
    .game-card.laser:hover .laser-mirror.m2 {
      animation-duration:1.4s;
      filter:brightness(1.25) saturate(1.2);
    }
    @keyframes laserBoardEnergize {
      50% { box-shadow:0 0 48px rgba(101,255,168,.4), inset 0 0 38px rgba(37,231,255,.12); border-color:rgba(101,255,168,.55); }
    }
    @keyframes laserBoardSweep {
      from { transform:translateY(0); opacity:.2; }
      50% { opacity:.95; }
      to { transform:translateY(280px); opacity:.2; }
    }
    @keyframes laserMirrorTiltA {
      0%,100% { transform:rotate(-50deg); }
      50% { transform:rotate(-38deg); }
    }
    @keyframes laserMirrorTiltB {
      0%,100% { transform:rotate(40deg); }
      50% { transform:rotate(52deg); }
    }
    @keyframes laserMirrorGlow {
      50% { box-shadow:0 0 28px var(--green); opacity:.85; }
    }
    @keyframes laserBeamSweep {
      0%,100% { transform:rotate(-26deg) scaleX(1); filter:brightness(1); }
      50% { transform:rotate(-16deg) scaleX(1.06); filter:brightness(1.4); }
    }
    @keyframes emitterRecoil {
      0%,100% { transform:translateX(0); }
      50% { transform:translateX(-6px); filter:brightness(1.3); }
    }
    @keyframes sparkFloatA {
      0%,100% { transform:translate(0,0); opacity:.55; }
      50% { transform:translate(14px,-20px); opacity:1; }
    }
    @keyframes sparkFloatB {
      0%,100% { transform:translate(0,0); opacity:.55; }
      50% { transform:translate(-18px,-14px); opacity:1; }
    }

/* --- Category-card integration: render injected scene, hide emblem poster --- */
.traffic-game-card.has-scene .traffic-game-art > i,
.traffic-game-card.has-scene .traffic-game-art > b,
.traffic-game-card.has-scene .traffic-game-art > em { display: none !important; }
.traffic-game-card.has-scene .traffic-game-art::before,
.traffic-game-card.has-scene .traffic-game-art::after { content: none !important; }
.traffic-game-card.has-scene .traffic-game-art {
  min-height: 210px;
  background:
    radial-gradient(120% 95% at 50% 6%, color-mix(in srgb, var(--game-a, #25e7ff), transparent 60%), transparent 60%),
    radial-gradient(95% 85% at 86% 94%, color-mix(in srgb, var(--game-b, #ff43d1), transparent 64%), transparent 60%),
    linear-gradient(160deg, #0b1030 0%, #0a0820 46%, #05060f 100%) !important;
}
.traffic-game-card.has-scene .traffic-game-art .art-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
/* Scene comes alive a touch more on hover. */
.traffic-game-card:hover .art-stage::before { opacity: .9; animation-duration: 1.8s; }
.traffic-game-card:hover .art-stage::after { animation-duration: 1.8s; }