/* ============================================================ SMJRifle Geek — 8-bit CSS Pixel Art Sprites Unit size: 3px (each "pixel" = 3x3px block) All coordinates: col*3 px, row*3 px ============================================================ */ /* ── SHARED WRAPPER ── */ .sprite-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; cursor: default; user-select: none; } .sprite-label { font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 0.65rem; color: #00ff41; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; width: 110px; } .sprite-label::before { content: "// "; opacity: 0.5; } /* ── BASE SPRITE ELEMENT ── */ .sprite-f1, .sprite-robin, .sprite-batman, .sprite-manutd, .sprite-pacman, .sprite-ps5 { width: 3px; height: 3px; background: transparent; display: inline-block; image-rendering: pixelated; } /* ============================================================ F1 CAR — Ferrari side view, 22 cols × 10 rows = 66×30px R=#e10600 B=#0f0f0f W=#f0f0f0 G=#999 Y=#ffe000 D=#8b0000 ============================================================ */ .sprite-f1 { box-shadow: /* Row 0 — nose tip */ 39px 0px 0 #e10600, 42px 0px 0 #e10600, /* Row 1 — upper nose + cockpit arch */ 30px 3px 0 #e10600, 33px 3px 0 #e10600, 36px 3px 0 #e10600, 39px 3px 0 #e10600, 42px 3px 0 #e10600, 45px 3px 0 #e10600, 48px 3px 0 #e10600, 51px 3px 0 #e10600, /* Row 2 — halo + cockpit top */ 24px 6px 0 #e10600, 27px 6px 0 #e10600, 30px 6px 0 #e10600, 33px 6px 0 #e10600, 36px 6px 0 #f0f0f0, 39px 6px 0 #f0f0f0, 42px 6px 0 #f0f0f0, 45px 6px 0 #e10600, 48px 6px 0 #e10600, 51px 6px 0 #e10600, 54px 6px 0 #e10600, 57px 6px 0 #e10600, /* Row 3 — rear wing post + sidepod + open cockpit + front body */ 0px 9px 0 #ffe000, 9px 9px 0 #e10600, 12px 9px 0 #e10600, 15px 9px 0 #e10600, 18px 9px 0 #e10600, 21px 9px 0 #e10600, 24px 9px 0 #e10600, 27px 9px 0 #e10600, 48px 9px 0 #e10600, 51px 9px 0 #e10600, 54px 9px 0 #e10600, 57px 9px 0 #e10600, 60px 9px 0 #e10600, 63px 9px 0 #ffe000, /* Row 4 — rear wing lower + full sidepod + front wing */ 0px 12px 0 #ffe000, 3px 12px 0 #e10600, 6px 12px 0 #e10600, 9px 12px 0 #e10600, 12px 12px 0 #e10600, 15px 12px 0 #e10600, 18px 12px 0 #e10600, 21px 12px 0 #e10600, 24px 12px 0 #e10600, 27px 12px 0 #e10600, 30px 12px 0 #8b0000, 33px 12px 0 #8b0000, 48px 12px 0 #e10600, 51px 12px 0 #e10600, 54px 12px 0 #e10600, 57px 12px 0 #e10600, 60px 12px 0 #e10600, 63px 12px 0 #ffe000, /* Row 5 — full floor line */ 0px 15px 0 #e10600, 3px 15px 0 #e10600, 6px 15px 0 #e10600, 9px 15px 0 #e10600, 12px 15px 0 #e10600, 15px 15px 0 #e10600, 18px 15px 0 #e10600, 21px 15px 0 #e10600, 24px 15px 0 #e10600, 27px 15px 0 #e10600, 30px 15px 0 #e10600, 33px 15px 0 #e10600, 36px 15px 0 #e10600, 39px 15px 0 #e10600, 42px 15px 0 #e10600, 45px 15px 0 #e10600, 48px 15px 0 #e10600, 51px 15px 0 #e10600, 54px 15px 0 #e10600, 57px 15px 0 #e10600, 60px 15px 0 #e10600, 63px 15px 0 #e10600, /* Row 6 — underfloor */ 3px 18px 0 #8b0000, 6px 18px 0 #8b0000, 9px 18px 0 #8b0000, 12px 18px 0 #8b0000, 15px 18px 0 #8b0000, 18px 18px 0 #8b0000, 21px 18px 0 #8b0000, 24px 18px 0 #8b0000, 27px 18px 0 #8b0000, 30px 18px 0 #8b0000, 33px 18px 0 #8b0000, 36px 18px 0 #8b0000, 39px 18px 0 #8b0000, 42px 18px 0 #8b0000, 45px 18px 0 #8b0000, 48px 18px 0 #8b0000, 51px 18px 0 #8b0000, 54px 18px 0 #8b0000, 57px 18px 0 #8b0000, 60px 18px 0 #8b0000, /* Row 7 — wheel arch tops */ 6px 21px 0 #0f0f0f, 9px 21px 0 #0f0f0f, 12px 21px 0 #0f0f0f, 15px 21px 0 #0f0f0f, 18px 21px 0 #0f0f0f, 42px 21px 0 #0f0f0f, 45px 21px 0 #0f0f0f, 48px 21px 0 #0f0f0f, 51px 21px 0 #0f0f0f, 54px 21px 0 #0f0f0f, /* Row 8 — wheels full + rims */ 3px 24px 0 #0f0f0f, 6px 24px 0 #0f0f0f, 9px 24px 0 #aaaaaa, 12px 24px 0 #aaaaaa, 15px 24px 0 #0f0f0f, 18px 24px 0 #0f0f0f, 21px 24px 0 #0f0f0f, 39px 24px 0 #0f0f0f, 42px 24px 0 #0f0f0f, 45px 24px 0 #aaaaaa, 48px 24px 0 #aaaaaa, 51px 24px 0 #0f0f0f, 54px 24px 0 #0f0f0f, 57px 24px 0 #0f0f0f, /* Row 9 — wheel bottoms */ 6px 27px 0 #0f0f0f, 9px 27px 0 #0f0f0f, 12px 27px 0 #0f0f0f, 15px 27px 0 #0f0f0f, 18px 27px 0 #0f0f0f, 42px 27px 0 #0f0f0f, 45px 27px 0 #0f0f0f, 48px 27px 0 #0f0f0f, 51px 27px 0 #0f0f0f, 54px 27px 0 #0f0f0f; animation: sprite-float 3s ease-in-out infinite, sprite-glow-red 2s ease-in-out infinite; margin: 30px 10px 10px 0; } /* ============================================================ NICO ROBIN — 14 cols × 22 rows = 42×66px S=#f4c2a1 H=#1a1a1a P=#4a1a7c D=#2a0d47 E=#4444ff R=#cc0000 ============================================================ */ .sprite-robin { box-shadow: /* Row 0 — hair top */ 12px 0px 0 #1a1a1a, 15px 0px 0 #1a1a1a, 18px 0px 0 #1a1a1a, 21px 0px 0 #1a1a1a, 24px 0px 0 #1a1a1a, 27px 0px 0 #1a1a1a, 30px 0px 0 #1a1a1a, /* Row 1 — hair upper */ 9px 3px 0 #1a1a1a, 12px 3px 0 #1a1a1a, 15px 3px 0 #1a1a1a, 18px 3px 0 #1a1a1a, 21px 3px 0 #1a1a1a, 24px 3px 0 #1a1a1a, 27px 3px 0 #1a1a1a, 30px 3px 0 #1a1a1a, 33px 3px 0 #1a1a1a, /* Row 2 — face top */ 9px 6px 0 #1a1a1a, 12px 6px 0 #f4c2a1, 15px 6px 0 #f4c2a1, 18px 6px 0 #f4c2a1, 21px 6px 0 #f4c2a1, 24px 6px 0 #f4c2a1, 27px 6px 0 #f4c2a1, 30px 6px 0 #1a1a1a, /* Row 3 — eyes */ 9px 9px 0 #1a1a1a, 12px 9px 0 #f4c2a1, 15px 9px 0 #4444ff, 18px 9px 0 #000033, 21px 9px 0 #f4c2a1, 24px 9px 0 #4444ff, 27px 9px 0 #000033, 30px 9px 0 #1a1a1a, /* Row 4 — nose / mouth */ 9px 12px 0 #1a1a1a, 12px 12px 0 #f4c2a1, 15px 12px 0 #f4c2a1, 18px 12px 0 #e08070, 21px 12px 0 #f4c2a1, 24px 12px 0 #f4c2a1, 27px 12px 0 #f4c2a1, 30px 12px 0 #1a1a1a, /* Row 5 — hair falls / chin */ 6px 15px 0 #1a1a1a, 9px 15px 0 #1a1a1a, 12px 15px 0 #f4c2a1, 15px 15px 0 #f4c2a1, 18px 15px 0 #f4c2a1, 21px 15px 0 #f4c2a1, 24px 15px 0 #f4c2a1, 27px 15px 0 #f4c2a1, 30px 15px 0 #1a1a1a, 33px 15px 0 #1a1a1a, /* Row 6 — neck + hair sides */ 6px 18px 0 #1a1a1a, 9px 18px 0 #1a1a1a, 12px 18px 0 #1a1a1a, 15px 18px 0 #f4c2a1, 18px 18px 0 #f4c2a1, 21px 18px 0 #f4c2a1, 24px 18px 0 #1a1a1a, 27px 18px 0 #1a1a1a, 30px 18px 0 #1a1a1a, 33px 18px 0 #1a1a1a, /* Row 7 — collar + shoulders */ 3px 21px 0 #1a1a1a, 6px 21px 0 #2a0d47, 9px 21px 0 #4a1a7c, 12px 21px 0 #4a1a7c, 15px 21px 0 #4a1a7c, 18px 21px 0 #4a1a7c, 21px 21px 0 #4a1a7c, 24px 21px 0 #4a1a7c, 27px 21px 0 #4a1a7c, 30px 21px 0 #2a0d47, 33px 21px 0 #1a1a1a, /* Row 8 — arms + torso top */ 3px 24px 0 #f4c2a1, 6px 24px 0 #2a0d47, 9px 24px 0 #4a1a7c, 12px 24px 0 #4a1a7c, 15px 24px 0 #4a1a7c, 18px 24px 0 #4a1a7c, 21px 24px 0 #4a1a7c, 24px 24px 0 #4a1a7c, 27px 24px 0 #4a1a7c, 30px 24px 0 #2a0d47, 33px 24px 0 #f4c2a1, /* Row 9 — arms + torso */ 3px 27px 0 #f4c2a1, 6px 27px 0 #2a0d47, 9px 27px 0 #4a1a7c, 12px 27px 0 #4a1a7c, 15px 27px 0 #4a1a7c, 18px 27px 0 #cc0000, 21px 27px 0 #cc0000, 24px 27px 0 #4a1a7c, 27px 27px 0 #4a1a7c, 30px 27px 0 #2a0d47, 33px 27px 0 #f4c2a1, /* Row 10 — hands + torso lower */ 3px 30px 0 #f4c2a1, 6px 30px 0 #2a0d47, 9px 30px 0 #4a1a7c, 12px 30px 0 #4a1a7c, 15px 30px 0 #4a1a7c, 18px 30px 0 #4a1a7c, 21px 30px 0 #4a1a7c, 24px 30px 0 #4a1a7c, 27px 30px 0 #4a1a7c, 30px 30px 0 #2a0d47, 33px 30px 0 #f4c2a1, /* Row 11 — waist */ 9px 33px 0 #2a0d47, 12px 33px 0 #2a0d47, 15px 33px 0 #2a0d47, 18px 33px 0 #2a0d47, 21px 33px 0 #2a0d47, 24px 33px 0 #2a0d47, 27px 33px 0 #2a0d47, /* Row 12-13 — skirt/legs */ 6px 36px 0 #2a0d47, 9px 36px 0 #2a0d47, 12px 36px 0 #4a1a7c, 15px 36px 0 #4a1a7c, 18px 36px 0 #4a1a7c, 21px 36px 0 #4a1a7c, 24px 36px 0 #4a1a7c, 27px 36px 0 #2a0d47, 30px 36px 0 #2a0d47, 6px 39px 0 #2a0d47, 9px 39px 0 #1a1a1a, 12px 39px 0 #1a1a1a, 15px 39px 0 #4a1a7c, 18px 39px 0 #4a1a7c, 21px 39px 0 #4a1a7c, 24px 39px 0 #1a1a1a, 27px 39px 0 #1a1a1a, 30px 39px 0 #2a0d47, /* Row 14 — legs */ 9px 42px 0 #1a1a1a, 12px 42px 0 #1a1a1a, 15px 42px 0 #1a1a1a, 18px 42px 0 #4a1a7c, 21px 42px 0 #1a1a1a, 24px 42px 0 #1a1a1a, 27px 42px 0 #1a1a1a, /* Row 15 — feet */ 9px 45px 0 #1a1a1a, 12px 45px 0 #1a1a1a, 15px 45px 0 #1a1a1a, 21px 45px 0 #1a1a1a, 24px 45px 0 #1a1a1a, 27px 45px 0 #1a1a1a; animation: sprite-float 3.4s ease-in-out infinite, sprite-glow-purple 2.5s ease-in-out infinite; margin: 10px; } /* ============================================================ BATMAN — 16 cols × 20 rows = 48×60px D=#1a1a1a G=#2d2d2d Y=#f7c94b W=#cccccc E=#ffff99 ============================================================ */ .sprite-batman { box-shadow: /* Row 0 — ear tips */ 9px 0px 0 #1a1a1a, 30px 0px 0 #1a1a1a, /* Row 1 — ears */ 6px 3px 0 #1a1a1a, 9px 3px 0 #1a1a1a, 27px 3px 0 #1a1a1a, 30px 3px 0 #1a1a1a, 33px 3px 0 #1a1a1a, /* Row 2 — cowl top */ 6px 6px 0 #1a1a1a, 9px 6px 0 #1a1a1a, 12px 6px 0 #1a1a1a, 15px 6px 0 #1a1a1a, 18px 6px 0 #1a1a1a, 21px 6px 0 #1a1a1a, 24px 6px 0 #1a1a1a, 27px 6px 0 #1a1a1a, 30px 6px 0 #1a1a1a, 33px 6px 0 #1a1a1a, /* Row 3 — cowl with white eye slits */ 3px 9px 0 #1a1a1a, 6px 9px 0 #1a1a1a, 9px 9px 0 #ffff99, 12px 9px 0 #ffff99, 15px 9px 0 #1a1a1a, 18px 9px 0 #1a1a1a, 21px 9px 0 #1a1a1a, 24px 9px 0 #ffff99, 27px 9px 0 #ffff99, 30px 9px 0 #1a1a1a, 33px 9px 0 #1a1a1a, 36px 9px 0 #1a1a1a, /* Row 4 — lower cowl / nose */ 3px 12px 0 #1a1a1a, 6px 12px 0 #1a1a1a, 9px 12px 0 #1a1a1a, 12px 12px 0 #1a1a1a, 15px 12px 0 #1a1a1a, 18px 12px 0 #2d2d2d, 21px 12px 0 #1a1a1a, 24px 12px 0 #1a1a1a, 27px 12px 0 #1a1a1a, 30px 12px 0 #1a1a1a, 33px 12px 0 #1a1a1a, 36px 12px 0 #1a1a1a, /* Row 5 — wide cape shoulders */ 0px 15px 0 #1a1a1a, 3px 15px 0 #1a1a1a, 6px 15px 0 #1a1a1a, 9px 15px 0 #1a1a1a, 12px 15px 0 #1a1a1a, 15px 15px 0 #1a1a1a, 18px 15px 0 #f7c94b, 21px 15px 0 #f7c94b, 24px 15px 0 #1a1a1a, 27px 15px 0 #1a1a1a, 30px 15px 0 #1a1a1a, 33px 15px 0 #1a1a1a, 36px 15px 0 #1a1a1a, 39px 15px 0 #1a1a1a, 42px 15px 0 #1a1a1a, /* Row 6 — chest + bat symbol */ 0px 18px 0 #1a1a1a, 3px 18px 0 #1a1a1a, 6px 18px 0 #1a1a1a, 9px 18px 0 #f7c94b, 12px 18px 0 #1a1a1a, 15px 18px 0 #1a1a1a, 18px 18px 0 #f7c94b, 21px 18px 0 #f7c94b, 24px 18px 0 #1a1a1a, 27px 18px 0 #1a1a1a, 30px 18px 0 #f7c94b, 33px 18px 0 #1a1a1a, 36px 18px 0 #1a1a1a, 39px 18px 0 #1a1a1a, 42px 18px 0 #1a1a1a, /* Row 7 — bat symbol middle */ 0px 21px 0 #2d2d2d, 3px 21px 0 #1a1a1a, 6px 21px 0 #f7c94b, 9px 21px 0 #f7c94b, 12px 21px 0 #f7c94b, 15px 21px 0 #f7c94b, 18px 21px 0 #f7c94b, 21px 21px 0 #f7c94b, 24px 21px 0 #f7c94b, 27px 21px 0 #f7c94b, 30px 21px 0 #f7c94b, 33px 21px 0 #f7c94b, 36px 21px 0 #f7c94b, 39px 21px 0 #1a1a1a, 42px 21px 0 #2d2d2d, /* Row 8 — belt */ 3px 24px 0 #1a1a1a, 6px 24px 0 #1a1a1a, 9px 24px 0 #f7c94b, 12px 24px 0 #f7c94b, 15px 24px 0 #f7c94b, 18px 24px 0 #1a1a1a, 21px 24px 0 #1a1a1a, 24px 24px 0 #f7c94b, 27px 24px 0 #f7c94b, 30px 24px 0 #f7c94b, 33px 24px 0 #f7c94b, 36px 24px 0 #1a1a1a, 39px 24px 0 #1a1a1a, /* Row 9-10 — lower cape flared */ 0px 27px 0 #2d2d2d, 3px 27px 0 #1a1a1a, 6px 27px 0 #1a1a1a, 9px 27px 0 #1a1a1a, 12px 27px 0 #1a1a1a, 15px 27px 0 #1a1a1a, 18px 27px 0 #1a1a1a, 21px 27px 0 #1a1a1a, 24px 27px 0 #1a1a1a, 27px 27px 0 #1a1a1a, 30px 27px 0 #1a1a1a, 33px 27px 0 #1a1a1a, 36px 27px 0 #1a1a1a, 39px 27px 0 #2d2d2d, 0px 30px 0 #2d2d2d, 3px 30px 0 #1a1a1a, 6px 30px 0 #1a1a1a, 9px 30px 0 #1a1a1a, 12px 30px 0 #1a1a1a, 15px 30px 0 #1a1a1a, 18px 30px 0 #1a1a1a, 21px 30px 0 #1a1a1a, 24px 30px 0 #1a1a1a, 27px 30px 0 #1a1a1a, 30px 30px 0 #1a1a1a, 33px 30px 0 #1a1a1a, 39px 30px 0 #2d2d2d, /* Row 11-12 — legs */ 9px 33px 0 #1a1a1a, 12px 33px 0 #1a1a1a, 15px 33px 0 #1a1a1a, 21px 33px 0 #1a1a1a, 24px 33px 0 #1a1a1a, 27px 33px 0 #1a1a1a, 30px 33px 0 #1a1a1a, 9px 36px 0 #1a1a1a, 12px 36px 0 #1a1a1a, 15px 36px 0 #1a1a1a, 21px 36px 0 #1a1a1a, 24px 36px 0 #1a1a1a, 27px 36px 0 #1a1a1a, /* Boots */ 6px 39px 0 #1a1a1a, 9px 39px 0 #1a1a1a, 12px 39px 0 #1a1a1a, 15px 39px 0 #1a1a1a, 18px 39px 0 #1a1a1a, 21px 39px 0 #1a1a1a, 24px 39px 0 #1a1a1a, 27px 39px 0 #1a1a1a, 30px 39px 0 #1a1a1a; animation: sprite-float 3.2s ease-in-out infinite, sprite-glow-yellow 2s ease-in-out infinite; margin: 10px; } /* ============================================================ MAN UTD DEVIL — 12 cols × 20 rows = 36×60px R=#da291c Y=#fbe122 B=#0f0f0f S=#f4c2a1 T=#cc1111 ============================================================ */ .sprite-manutd { box-shadow: /* Row 0 — horn tips */ 3px 0px 0 #fbe122, 21px 0px 0 #fbe122, /* Row 1 — horns */ 3px 3px 0 #fbe122, 6px 3px 0 #fbe122, 18px 3px 0 #fbe122, 21px 3px 0 #fbe122, /* Row 2 — horns base + head top */ 3px 6px 0 #fbe122, 6px 6px 0 #da291c, 9px 6px 0 #da291c, 12px 6px 0 #da291c, 15px 6px 0 #da291c, 18px 6px 0 #da291c, 21px 6px 0 #fbe122, /* Row 3 — face */ 3px 9px 0 #da291c, 6px 9px 0 #da291c, 9px 9px 0 #f4c2a1, 12px 9px 0 #f4c2a1, 15px 9px 0 #f4c2a1, 18px 9px 0 #f4c2a1, 21px 9px 0 #da291c, 24px 9px 0 #da291c, /* Row 4 — eyes */ 6px 12px 0 #da291c, 9px 12px 0 #000000, 12px 12px 0 #f4c2a1, 15px 12px 0 #f4c2a1, 18px 12px 0 #000000, 21px 12px 0 #da291c, /* Row 5 — mouth / chin */ 6px 15px 0 #da291c, 9px 15px 0 #f4c2a1, 12px 15px 0 #8b0000, 15px 15px 0 #8b0000, 18px 15px 0 #f4c2a1, 21px 15px 0 #da291c, /* Row 6 — neck / body top */ 6px 18px 0 #da291c, 9px 18px 0 #da291c, 12px 18px 0 #da291c, 15px 18px 0 #da291c, 18px 18px 0 #da291c, 21px 18px 0 #da291c, /* Row 7 — arms spread / torso */ 0px 21px 0 #da291c, 3px 21px 0 #da291c, 6px 21px 0 #da291c, 9px 21px 0 #da291c, 12px 21px 0 #da291c, 15px 21px 0 #da291c, 18px 21px 0 #da291c, 21px 21px 0 #da291c, 24px 21px 0 #da291c, 27px 21px 0 #da291c, /* Row 8 — hands + torso */ 0px 24px 0 #f4c2a1, 3px 24px 0 #da291c, 6px 24px 0 #da291c, 9px 24px 0 #da291c, 12px 24px 0 #da291c, 15px 24px 0 #da291c, 18px 24px 0 #da291c, 21px 24px 0 #da291c, 24px 24px 0 #da291c, 27px 24px 0 #f4c2a1, /* Row 9 — waist + trident start */ 6px 27px 0 #da291c, 9px 27px 0 #da291c, 12px 27px 0 #da291c, 15px 27px 0 #da291c, 18px 27px 0 #da291c, 21px 27px 0 #da291c, /* Row 10 — trident top prongs */ 6px 30px 0 #fbe122, 9px 30px 0 #0f0f0f, 12px 30px 0 #fbe122, 15px 30px 0 #0f0f0f, 18px 30px 0 #fbe122, 21px 30px 0 #0f0f0f, /* Row 11 — trident shaft */ 6px 33px 0 #0f0f0f, 9px 33px 0 #fbe122, 12px 33px 0 #0f0f0f, 15px 33px 0 #fbe122, 18px 33px 0 #0f0f0f, 21px 33px 0 #fbe122, /* Row 12 — trident converges */ 9px 36px 0 #fbe122, 12px 36px 0 #fbe122, 15px 36px 0 #fbe122, 18px 36px 0 #fbe122, /* Row 13 — trident handle + tail */ 12px 39px 0 #fbe122, 15px 39px 0 #fbe122, 24px 39px 0 #da291c, 27px 39px 0 #da291c, /* Row 14 — legs */ 9px 42px 0 #0f0f0f, 12px 42px 0 #0f0f0f, 15px 42px 0 #fbe122, 18px 42px 0 #0f0f0f, 24px 42px 0 #da291c, 27px 42px 0 #da291c, 30px 42px 0 #da291c, /* Row 15 — tail tip */ 27px 45px 0 #fbe122, 30px 45px 0 #da291c, /* Row 16 — hooves */ 6px 48px 0 #0f0f0f, 9px 48px 0 #0f0f0f, 12px 48px 0 #0f0f0f, 18px 48px 0 #0f0f0f, 21px 48px 0 #0f0f0f, 24px 48px 0 #0f0f0f; animation: sprite-float 3.6s ease-in-out infinite, sprite-glow-red 2s ease-in-out infinite; margin: 10px; } /* ============================================================ PACMAN GHOST (BLINKY) — 12 cols × 14 rows = 36×42px R=#ff1a1a W=#ffffff B=#0022ff S=#000000 ============================================================ */ .sprite-pacman { box-shadow: /* Row 0 — dome top */ 9px 0px 0 #ff1a1a, 12px 0px 0 #ff1a1a, 15px 0px 0 #ff1a1a, 18px 0px 0 #ff1a1a, 21px 0px 0 #ff1a1a, 24px 0px 0 #ff1a1a, /* Row 1 — dome */ 6px 3px 0 #ff1a1a, 9px 3px 0 #ff1a1a, 12px 3px 0 #ff1a1a, 15px 3px 0 #ff1a1a, 18px 3px 0 #ff1a1a, 21px 3px 0 #ff1a1a, 24px 3px 0 #ff1a1a, 27px 3px 0 #ff1a1a, /* Row 2 — eyes start */ 3px 6px 0 #ff1a1a, 6px 6px 0 #ff1a1a, 9px 6px 0 #ffffff, 12px 6px 0 #ffffff, 15px 6px 0 #ff1a1a, 18px 6px 0 #ff1a1a, 21px 6px 0 #ffffff, 24px 6px 0 #ffffff, 27px 6px 0 #ff1a1a, 30px 6px 0 #ff1a1a, /* Row 3 — pupils */ 3px 9px 0 #ff1a1a, 6px 9px 0 #ff1a1a, 9px 9px 0 #ffffff, 12px 9px 0 #0022ff, 15px 9px 0 #ff1a1a, 18px 9px 0 #ff1a1a, 21px 9px 0 #ffffff, 24px 9px 0 #0022ff, 27px 9px 0 #ff1a1a, 30px 9px 0 #ff1a1a, /* Row 4 — body */ 3px 12px 0 #ff1a1a, 6px 12px 0 #ff1a1a, 9px 12px 0 #ff1a1a, 12px 12px 0 #ff1a1a, 15px 12px 0 #ff1a1a, 18px 12px 0 #ff1a1a, 21px 12px 0 #ff1a1a, 24px 12px 0 #ff1a1a, 27px 12px 0 #ff1a1a, 30px 12px 0 #ff1a1a, /* Row 5 — body */ 3px 15px 0 #ff1a1a, 6px 15px 0 #ff1a1a, 9px 15px 0 #ff1a1a, 12px 15px 0 #ff1a1a, 15px 15px 0 #ff1a1a, 18px 15px 0 #ff1a1a, 21px 15px 0 #ff1a1a, 24px 15px 0 #ff1a1a, 27px 15px 0 #ff1a1a, 30px 15px 0 #ff1a1a, /* Row 6 — skirt bumps */ 3px 18px 0 #ff1a1a, 6px 18px 0 #ff1a1a, 9px 18px 0 #ff1a1a, 12px 18px 0 #ff1a1a, 15px 18px 0 #ff1a1a, 18px 18px 0 #ff1a1a, 21px 18px 0 #ff1a1a, 24px 18px 0 #ff1a1a, 27px 18px 0 #ff1a1a, 30px 18px 0 #ff1a1a, /* Row 7 — wavy bottom */ 3px 21px 0 #ff1a1a, 6px 21px 0 #ff1a1a, 9px 21px 0 #ff1a1a, 15px 21px 0 #ff1a1a, 18px 21px 0 #ff1a1a, 21px 21px 0 #ff1a1a, 27px 21px 0 #ff1a1a, 30px 21px 0 #ff1a1a, /* Row 8 — wavy bottom indent */ 3px 24px 0 #ff1a1a, 6px 24px 0 #ff1a1a, 15px 24px 0 #ff1a1a, 18px 24px 0 #ff1a1a, 27px 24px 0 #ff1a1a, 30px 24px 0 #ff1a1a; animation: sprite-float 2.8s ease-in-out infinite, sprite-glow-red 1.5s ease-in-out infinite; margin: 10px; } /* ============================================================ PS5 CONTROLLER — 22 cols × 14 rows = 66×42px W=#e8e8e8 B=#222222 L=#00439c C=#00b4d8 X=#0070cc O=#cc2200 SQ=#cc00aa TR=#00aa44 ============================================================ */ .sprite-ps5 { box-shadow: /* Row 0 — touchpad top */ 15px 0px 0 #e8e8e8, 18px 0px 0 #e8e8e8, 21px 0px 0 #e8e8e8, 24px 0px 0 #e8e8e8, 27px 0px 0 #e8e8e8, 30px 0px 0 #e8e8e8, 33px 0px 0 #e8e8e8, 36px 0px 0 #e8e8e8, 39px 0px 0 #e8e8e8, 42px 0px 0 #e8e8e8, 45px 0px 0 #e8e8e8, 48px 0px 0 #e8e8e8, /* Row 1 — shoulders L2/R2 triggers */ 3px 3px 0 #e8e8e8, 6px 3px 0 #e8e8e8, 9px 3px 0 #222222, 12px 3px 0 #222222, 15px 3px 0 #e8e8e8, 18px 3px 0 #cccccc, 21px 3px 0 #cccccc, 24px 3px 0 #cccccc, 27px 3px 0 #cccccc, 30px 3px 0 #cccccc, 33px 3px 0 #cccccc, 36px 3px 0 #cccccc, 39px 3px 0 #cccccc, 42px 3px 0 #e8e8e8, 45px 3px 0 #222222, 48px 3px 0 #222222, 51px 3px 0 #e8e8e8, 54px 3px 0 #e8e8e8, /* Row 2 — body top */ 0px 6px 0 #e8e8e8, 3px 6px 0 #e8e8e8, 6px 6px 0 #e8e8e8, 9px 6px 0 #e8e8e8, 12px 6px 0 #e8e8e8, 15px 6px 0 #e8e8e8, 18px 6px 0 #e8e8e8, 21px 6px 0 #e8e8e8, 24px 6px 0 #e8e8e8, 27px 6px 0 #e8e8e8, 30px 6px 0 #e8e8e8, 33px 6px 0 #e8e8e8, 36px 6px 0 #e8e8e8, 39px 6px 0 #e8e8e8, 42px 6px 0 #e8e8e8, 45px 6px 0 #e8e8e8, 48px 6px 0 #e8e8e8, 51px 6px 0 #e8e8e8, 54px 6px 0 #e8e8e8, 57px 6px 0 #e8e8e8, 60px 6px 0 #e8e8e8, /* Row 3 — D-pad side | touchpad | face buttons side */ 0px 9px 0 #e8e8e8, 3px 9px 0 #e8e8e8, 6px 9px 0 #222222, 9px 9px 0 #222222, 12px 9px 0 #e8e8e8, 15px 9px 0 #e8e8e8, 18px 9px 0 #cccccc, 21px 9px 0 #cccccc, 24px 9px 0 #cccccc, 27px 9px 0 #00b4d8, 30px 9px 0 #00b4d8, 33px 9px 0 #cccccc, 36px 9px 0 #cccccc, 39px 9px 0 #cccccc, 42px 9px 0 #e8e8e8, 45px 9px 0 #e8e8e8, 48px 9px 0 #00aa44, 51px 9px 0 #cc2200, 54px 9px 0 #e8e8e8, 57px 9px 0 #e8e8e8, 60px 9px 0 #e8e8e8, /* Row 4 — D-pad center | PS button | face buttons */ 0px 12px 0 #e8e8e8, 3px 12px 0 #222222, 6px 12px 0 #222222, 9px 12px 0 #222222, 12px 12px 0 #e8e8e8, 15px 12px 0 #e8e8e8, 18px 12px 0 #e8e8e8, 21px 12px 0 #e8e8e8, 24px 12px 0 #e8e8e8, 27px 12px 0 #0070cc, 30px 12px 0 #0070cc, 33px 12px 0 #e8e8e8, 36px 12px 0 #e8e8e8, 39px 12px 0 #e8e8e8, 42px 12px 0 #e8e8e8, 45px 12px 0 #cc00aa, 48px 12px 0 #e8e8e8, 51px 12px 0 #e8e8e8, 54px 12px 0 #0070cc, 57px 12px 0 #e8e8e8, 60px 12px 0 #e8e8e8, /* Row 5 — D-pad lower | sticks area | face buttons lower */ 0px 15px 0 #e8e8e8, 3px 15px 0 #e8e8e8, 6px 15px 0 #222222, 9px 15px 0 #222222, 12px 15px 0 #e8e8e8, 15px 15px 0 #e8e8e8, 18px 15px 0 #222222, 21px 15px 0 #222222, 24px 15px 0 #222222, 27px 15px 0 #e8e8e8, 30px 15px 0 #e8e8e8, 33px 15px 0 #222222, 36px 15px 0 #222222, 39px 15px 0 #222222, 42px 15px 0 #e8e8e8, 45px 15px 0 #e8e8e8, 48px 15px 0 #cc2200, 51px 15px 0 #e8e8e8, 54px 15px 0 #e8e8e8, 57px 15px 0 #e8e8e8, 60px 15px 0 #e8e8e8, /* Row 6 — body lower */ 0px 18px 0 #e8e8e8, 3px 18px 0 #e8e8e8, 6px 18px 0 #e8e8e8, 9px 18px 0 #e8e8e8, 12px 18px 0 #e8e8e8, 15px 18px 0 #e8e8e8, 18px 18px 0 #e8e8e8, 21px 18px 0 #e8e8e8, 24px 18px 0 #e8e8e8, 27px 18px 0 #e8e8e8, 30px 18px 0 #e8e8e8, 33px 18px 0 #e8e8e8, 36px 18px 0 #e8e8e8, 39px 18px 0 #e8e8e8, 42px 18px 0 #e8e8e8, 45px 18px 0 #e8e8e8, 48px 18px 0 #e8e8e8, 51px 18px 0 #e8e8e8, 54px 18px 0 #e8e8e8, 57px 18px 0 #e8e8e8, 60px 18px 0 #e8e8e8, /* Row 7 — handle tops */ 0px 21px 0 #e8e8e8, 3px 21px 0 #e8e8e8, 6px 21px 0 #e8e8e8, 9px 21px 0 #e8e8e8, 12px 21px 0 #e8e8e8, 48px 21px 0 #e8e8e8, 51px 21px 0 #e8e8e8, 54px 21px 0 #e8e8e8, 57px 21px 0 #e8e8e8, 60px 21px 0 #e8e8e8, /* Row 8 — handles */ 0px 24px 0 #e8e8e8, 3px 24px 0 #e8e8e8, 6px 24px 0 #e8e8e8, 9px 24px 0 #e8e8e8, 51px 24px 0 #e8e8e8, 54px 24px 0 #e8e8e8, 57px 24px 0 #e8e8e8, 60px 24px 0 #e8e8e8, /* Row 9 — handle bottoms */ 3px 27px 0 #e8e8e8, 6px 27px 0 #e8e8e8, 9px 27px 0 #e8e8e8, 51px 27px 0 #e8e8e8, 54px 27px 0 #e8e8e8, 57px 27px 0 #e8e8e8; animation: sprite-float 3.1s ease-in-out infinite, sprite-glow-blue 2.2s ease-in-out infinite; margin: 10px; } /* ============================================================ SPRITE ANIMATIONS ============================================================ */ @keyframes sprite-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes sprite-glow-red { 0%, 100% { filter: drop-shadow(0 0 3px #ff000066) drop-shadow(0 0 8px #e1060033); } 50% { filter: drop-shadow(0 0 6px #ff0000cc) drop-shadow(0 0 14px #e1060077); } } @keyframes sprite-glow-purple { 0%, 100% { filter: drop-shadow(0 0 3px #7c3aed66) drop-shadow(0 0 8px #4a1a7c33); } 50% { filter: drop-shadow(0 0 6px #a855f7cc) drop-shadow(0 0 14px #7c3aed77); } } @keyframes sprite-glow-yellow { 0%, 100% { filter: drop-shadow(0 0 3px #f7c94b66) drop-shadow(0 0 8px #1a1a1a55); } 50% { filter: drop-shadow(0 0 6px #f7c94bcc) drop-shadow(0 0 14px #ffd70088); } } @keyframes sprite-glow-blue { 0%, 100% { filter: drop-shadow(0 0 3px #00d4ff55) drop-shadow(0 0 8px #0070cc33); } 50% { filter: drop-shadow(0 0 6px #00d4ffcc) drop-shadow(0 0 14px #00b4d888); } } /* ── SPRITE SHOWCASE STRIP ── */ .sprite-strip { display: flex; justify-content: center; align-items: flex-end; gap: 3rem; padding: 2rem 1rem 3rem; flex-wrap: wrap; } @media (max-width: 768px) { .sprite-strip { gap: 2rem; padding: 1.5rem 0.5rem 2rem; } .sprite-f1, .sprite-robin, .sprite-batman, .sprite-manutd, .sprite-pacman, .sprite-ps5 { transform: scale(0.75); transform-origin: bottom center; } } @media (max-width: 480px) { .sprite-strip { gap: 1.5rem; } .sprite-f1, .sprite-robin, .sprite-batman, .sprite-manutd, .sprite-pacman, .sprite-ps5 { transform: scale(0.6); transform-origin: bottom center; } } /* ============================================================ NEW SPRITES — 8-bit CSS pixel art (3px unit) ============================================================ */ /* ── Base element shared styles ── */ .sprite-keyboard, .sprite-rose, .sprite-books, .sprite-robot, .sprite-tennis, .sprite-cricket, .sprite-witcher, .sprite-khabib, .sprite-mtb, .sprite-dawn, .sprite-tech, .sprite-pool, .sprite-mystery { width: 3px; height: 3px; background: transparent; display: inline-block; image-rendering: pixelated; } .sprite-keyboard { box-shadow: 0px 0px 0 #1e2030, 3px 0px 0 #1e2030, 6px 0px 0 #1e2030, 9px 0px 0 #1e2030, 12px 0px 0 #1e2030, 15px 0px 0 #1e2030, 18px 0px 0 #1e2030, 21px 0px 0 #1e2030, 24px 0px 0 #1e2030, 27px 0px 0 #1e2030, 30px 0px 0 #1e2030, 0px 3px 0 #1e2030, 3px 3px 0 #8899aa, 6px 3px 0 #8899aa, 9px 3px 0 #8899aa, 12px 3px 0 #8899aa, 15px 3px 0 #8899aa, 18px 3px 0 #8899aa, 21px 3px 0 #8899aa, 24px 3px 0 #8899aa, 27px 3px 0 #8899aa, 30px 3px 0 #1e2030, 0px 6px 0 #1e2030, 3px 6px 0 #8899aa, 6px 6px 0 #8899aa, 9px 6px 0 #8899aa, 12px 6px 0 #8899aa, 15px 6px 0 #8899aa, 18px 6px 0 #8899aa, 21px 6px 0 #8899aa, 24px 6px 0 #8899aa, 27px 6px 0 #8899aa, 30px 6px 0 #1e2030, 0px 9px 0 #1e2030, 3px 9px 0 #ff6b6b, 6px 9px 0 #51cf66, 9px 9px 0 #74c0fc, 12px 9px 0 #8899aa, 15px 9px 0 #8899aa, 18px 9px 0 #8899aa, 21px 9px 0 #8899aa, 24px 9px 0 #8899aa, 27px 9px 0 #1e2030, 30px 9px 0 #1e2030, 0px 12px 0 #1e2030, 3px 12px 0 #1e2030, 6px 12px 0 #4a5568, 9px 12px 0 #4a5568, 12px 12px 0 #4a5568, 15px 12px 0 #4a5568, 18px 12px 0 #4a5568, 21px 12px 0 #4a5568, 24px 12px 0 #4a5568, 27px 12px 0 #1e2030, 30px 12px 0 #1e2030, 0px 15px 0 #1e2030, 3px 15px 0 #1e2030, 6px 15px 0 #1e2030, 9px 15px 0 #1e2030, 12px 15px 0 #1e2030, 15px 15px 0 #1e2030, 18px 15px 0 #1e2030, 21px 15px 0 #1e2030, 24px 15px 0 #1e2030, 27px 15px 0 #1e2030, 30px 15px 0 #1e2030; animation: sprite-float 3.2s ease-in-out infinite, sprite-glow-blue 2.5s ease-in-out infinite; } .sprite-rose { box-shadow: 9px 0px 0 #cc2222, 12px 0px 0 #cc2222, 3px 3px 0 #cc2222, 6px 3px 0 #cc2222, 9px 3px 0 #ff8888, 12px 3px 0 #ff8888, 15px 3px 0 #cc2222, 18px 3px 0 #cc2222, 3px 6px 0 #cc2222, 6px 6px 0 #ff8888, 9px 6px 0 #ff8888, 12px 6px 0 #ff8888, 15px 6px 0 #cc2222, 18px 6px 0 #cc2222, 0px 9px 0 #cc2222, 3px 9px 0 #cc2222, 6px 9px 0 #ff8888, 9px 9px 0 #ff8888, 12px 9px 0 #ff8888, 15px 9px 0 #ff8888, 18px 9px 0 #cc2222, 21px 9px 0 #cc2222, 3px 12px 0 #cc2222, 6px 12px 0 #cc2222, 9px 12px 0 #ff8888, 12px 12px 0 #ff8888, 15px 12px 0 #cc2222, 18px 12px 0 #cc2222, 6px 15px 0 #cc2222, 9px 15px 0 #cc2222, 12px 15px 0 #cc2222, 15px 15px 0 #cc2222, 9px 18px 0 #2d9a27, 12px 18px 0 #2d9a27, 3px 21px 0 #4db84a, 6px 21px 0 #2d9a27, 9px 21px 0 #2d9a27, 12px 21px 0 #2d9a27, 15px 21px 0 #4db84a, 6px 24px 0 #4db84a, 9px 24px 0 #2d9a27, 12px 24px 0 #2d9a27, 15px 24px 0 #4db84a, 9px 27px 0 #2d9a27, 12px 27px 0 #2d9a27, 9px 30px 0 #2d9a27, 12px 30px 0 #2d9a27, 9px 33px 0 #2d9a27, 12px 33px 0 #2d9a27; animation: sprite-float 4s ease-in-out infinite, sprite-glow-red 2.5s ease-in-out infinite; } .sprite-books { box-shadow: 3px 0px 0 #cc4444, 6px 0px 0 #cc4444, 9px 0px 0 #cc4444, 12px 0px 0 #cc4444, 15px 0px 0 #cc4444, 18px 0px 0 #cc4444, 21px 0px 0 #cc4444, 24px 0px 0 #cc4444, 27px 0px 0 #cc4444, 3px 3px 0 #cc4444, 6px 3px 0 #c0a030, 9px 3px 0 #cc4444, 12px 3px 0 #fff0d0, 15px 3px 0 #fff0d0, 18px 3px 0 #fff0d0, 21px 3px 0 #cc4444, 24px 3px 0 #cc4444, 3px 6px 0 #4488cc, 6px 6px 0 #4488cc, 9px 6px 0 #4488cc, 12px 6px 0 #4488cc, 15px 6px 0 #4488cc, 18px 6px 0 #4488cc, 21px 6px 0 #4488cc, 24px 6px 0 #4488cc, 27px 6px 0 #4488cc, 3px 9px 0 #4488cc, 6px 9px 0 #c0a030, 9px 9px 0 #4488cc, 12px 9px 0 #fff0d0, 15px 9px 0 #fff0d0, 18px 9px 0 #fff0d0, 21px 9px 0 #4488cc, 24px 9px 0 #4488cc, 3px 12px 0 #44aa44, 6px 12px 0 #44aa44, 9px 12px 0 #44aa44, 12px 12px 0 #44aa44, 15px 12px 0 #44aa44, 18px 12px 0 #44aa44, 21px 12px 0 #44aa44, 24px 12px 0 #44aa44, 27px 12px 0 #44aa44, 3px 15px 0 #44aa44, 6px 15px 0 #c0a030, 9px 15px 0 #44aa44, 12px 15px 0 #fff0d0, 15px 15px 0 #fff0d0, 18px 15px 0 #fff0d0, 21px 15px 0 #44aa44, 24px 15px 0 #44aa44, 3px 18px 0 #44aa44, 6px 18px 0 #44aa44, 9px 18px 0 #44aa44, 12px 18px 0 #44aa44, 15px 18px 0 #44aa44, 18px 18px 0 #44aa44, 21px 18px 0 #44aa44, 24px 18px 0 #44aa44, 27px 18px 0 #44aa44, 0px 21px 0 #8b6914, 3px 21px 0 #8b6914, 6px 21px 0 #8b6914, 9px 21px 0 #8b6914, 12px 21px 0 #8b6914, 15px 21px 0 #8b6914, 18px 21px 0 #8b6914, 21px 21px 0 #8b6914, 24px 21px 0 #8b6914, 27px 21px 0 #8b6914; animation: sprite-float 3.8s ease-in-out infinite, sprite-glow-yellow 2.5s ease-in-out infinite; } .sprite-robot { box-shadow: 6px 0px 0 #9900ff, 15px 0px 0 #9900ff, 6px 3px 0 #8899aa, 15px 3px 0 #8899aa, 3px 6px 0 #8899aa, 6px 6px 0 #8899aa, 9px 6px 0 #8899aa, 12px 6px 0 #8899aa, 15px 6px 0 #8899aa, 18px 6px 0 #8899aa, 0px 9px 0 #8899aa, 3px 9px 0 #1a88ff, 6px 9px 0 #8899aa, 9px 9px 0 #8899aa, 12px 9px 0 #8899aa, 15px 9px 0 #8899aa, 18px 9px 0 #1a88ff, 21px 9px 0 #8899aa, 0px 12px 0 #8899aa, 3px 12px 0 #8899aa, 6px 12px 0 #8899aa, 9px 12px 0 #d0d0d0, 12px 12px 0 #8899aa, 15px 12px 0 #d0d0d0, 18px 12px 0 #8899aa, 21px 12px 0 #8899aa, 0px 15px 0 #8899aa, 3px 15px 0 #8899aa, 6px 15px 0 #8899aa, 9px 15px 0 #8899aa, 12px 15px 0 #8899aa, 15px 15px 0 #8899aa, 18px 15px 0 #8899aa, 21px 15px 0 #8899aa, 3px 18px 0 #8899aa, 6px 18px 0 #8899aa, 9px 18px 0 #8899aa, 12px 18px 0 #8899aa, 15px 18px 0 #8899aa, 18px 18px 0 #8899aa, 0px 21px 0 #8899aa, 3px 21px 0 #8899aa, 6px 21px 0 #8899aa, 9px 21px 0 #8899aa, 12px 21px 0 #8899aa, 15px 21px 0 #8899aa, 18px 21px 0 #8899aa, 21px 21px 0 #8899aa, 0px 24px 0 #8899aa, 3px 24px 0 #1a88ff, 6px 24px 0 #8899aa, 9px 24px 0 #ff4444, 12px 24px 0 #8899aa, 15px 24px 0 #8899aa, 18px 24px 0 #8899aa, 21px 24px 0 #1a88ff, 0px 27px 0 #8899aa, 3px 27px 0 #8899aa, 6px 27px 0 #8899aa, 9px 27px 0 #8899aa, 12px 27px 0 #8899aa, 15px 27px 0 #8899aa, 18px 27px 0 #8899aa, 21px 27px 0 #8899aa, 0px 30px 0 #8899aa, 3px 30px 0 #8899aa, 18px 30px 0 #8899aa, 21px 30px 0 #8899aa, 3px 33px 0 #8899aa, 9px 33px 0 #8899aa, 12px 33px 0 #8899aa, 18px 33px 0 #8899aa; animation: sprite-float 3.6s ease-in-out infinite; } .sprite-witcher { box-shadow: 3px 0px 0 #c0a030, 6px 0px 0 #c0a030, 9px 0px 0 #c0a030, 12px 0px 0 #c0a030, 15px 0px 0 #c0a030, 18px 0px 0 #c0a030, 0px 3px 0 #c0a030, 3px 3px 0 #c8c8c8, 6px 3px 0 #c8c8c8, 9px 3px 0 #c8c8c8, 12px 3px 0 #c8c8c8, 15px 3px 0 #c8c8c8, 18px 3px 0 #c8c8c8, 21px 3px 0 #c0a030, 0px 6px 0 #c0a030, 3px 6px 0 #c8c8c8, 6px 6px 0 #c8c8c8, 9px 6px 0 #333333, 12px 6px 0 #333333, 15px 6px 0 #c8c8c8, 18px 6px 0 #c8c8c8, 21px 6px 0 #c0a030, 0px 9px 0 #c0a030, 3px 9px 0 #c8c8c8, 6px 9px 0 #333333, 9px 9px 0 #c8c8c8, 12px 9px 0 #c8c8c8, 15px 9px 0 #333333, 18px 9px 0 #c8c8c8, 21px 9px 0 #c0a030, 0px 12px 0 #c0a030, 3px 12px 0 #c8c8c8, 6px 12px 0 #c8c8c8, 9px 12px 0 #c8c8c8, 12px 12px 0 #c8c8c8, 15px 12px 0 #c8c8c8, 18px 12px 0 #c8c8c8, 21px 12px 0 #c0a030, 0px 15px 0 #c0a030, 3px 15px 0 #c8c8c8, 6px 15px 0 #c0a030, 9px 15px 0 #c0a030, 12px 15px 0 #c0a030, 15px 15px 0 #c0a030, 18px 15px 0 #c0a030, 21px 15px 0 #c0a030, 0px 18px 0 #c0a030, 3px 18px 0 #c8c8c8, 6px 18px 0 #333333, 9px 18px 0 #333333, 12px 18px 0 #333333, 15px 18px 0 #c8c8c8, 18px 18px 0 #c0a030, 3px 21px 0 #c0a030, 6px 21px 0 #c0a030, 9px 21px 0 #c0a030, 12px 21px 0 #c0a030, 15px 21px 0 #c0a030, 18px 21px 0 #c0a030; animation: sprite-float 4.2s ease-in-out infinite, sprite-glow-yellow 2.5s ease-in-out infinite; } .sprite-dawn { box-shadow: 9px 0px 0 #ffd700, 12px 0px 0 #ffd700, 15px 0px 0 #ffd700, 18px 0px 0 #ffd700, 6px 3px 0 #ffd700, 9px 3px 0 #ff8c00, 12px 3px 0 #ff8c00, 15px 3px 0 #ff8c00, 18px 3px 0 #ffd700, 21px 3px 0 #ffd700, 3px 6px 0 #ffd700, 6px 6px 0 #ff8c00, 9px 6px 0 #ff8c00, 12px 6px 0 #ffd700, 15px 6px 0 #ffd700, 18px 6px 0 #ff8c00, 21px 6px 0 #ff8c00, 24px 6px 0 #ffd700, 0px 9px 0 #ff8c00, 3px 9px 0 #ff8c00, 6px 9px 0 #ff8c00, 9px 9px 0 #ff8c00, 12px 9px 0 #ff8c00, 15px 9px 0 #ff8c00, 18px 9px 0 #ff8c00, 21px 9px 0 #ff8c00, 24px 9px 0 #ff8c00, 27px 9px 0 #ff8c00, 30px 9px 0 #ff8c00, 0px 12px 0 #2d3748, 3px 12px 0 #2d3748, 6px 12px 0 #2d3748, 9px 12px 0 #2d3748, 12px 12px 0 #2d3748, 15px 12px 0 #2d3748, 18px 12px 0 #2d3748, 21px 12px 0 #2d3748, 24px 12px 0 #2d3748, 27px 12px 0 #2d3748, 30px 12px 0 #2d3748, 3px 15px 0 #2d3748, 6px 15px 0 #2d3748, 9px 15px 0 #2d3748, 12px 15px 0 #1a202c, 15px 15px 0 #1a202c, 18px 15px 0 #1a202c, 21px 15px 0 #2d3748, 24px 15px 0 #2d3748, 6px 18px 0 #1a202c, 9px 18px 0 #1a202c, 12px 18px 0 #1a202c, 15px 18px 0 #1a202c, 18px 18px 0 #1a202c, 21px 18px 0 #1a202c, 24px 18px 0 #1a202c, 0px 21px 0 #1a1a2e, 3px 21px 0 #1a1a2e, 6px 21px 0 #1a1a2e, 9px 21px 0 #1a1a2e, 12px 21px 0 #1a1a2e, 15px 21px 0 #1a1a2e, 18px 21px 0 #1a1a2e, 21px 21px 0 #1a1a2e, 24px 21px 0 #1a1a2e, 27px 21px 0 #1a1a2e, 30px 21px 0 #1a1a2e, 33px 21px 0 #223344; animation: sprite-float 5s ease-in-out infinite; } .sprite-tech { box-shadow: 0px 0px 0 #555566, 3px 0px 0 #555566, 6px 0px 0 #555566, 9px 0px 0 #555566, 12px 0px 0 #555566, 15px 0px 0 #555566, 18px 0px 0 #555566, 21px 0px 0 #555566, 0px 3px 0 #555566, 3px 3px 0 #99ccff, 6px 3px 0 #99ccff, 9px 3px 0 #99ccff, 12px 3px 0 #99ccff, 15px 3px 0 #99ccff, 18px 3px 0 #99ccff, 0px 6px 0 #555566, 3px 6px 0 #99ccff, 6px 6px 0 #1a88ff, 9px 6px 0 #1a88ff, 12px 6px 0 #99ccff, 15px 6px 0 #99ccff, 18px 6px 0 #99ccff, 0px 9px 0 #555566, 3px 9px 0 #99ccff, 6px 9px 0 #99ccff, 9px 9px 0 #99ccff, 12px 9px 0 #99ccff, 15px 9px 0 #99ccff, 18px 9px 0 #99ccff, 0px 12px 0 #555566, 3px 12px 0 #555566, 6px 12px 0 #555566, 9px 12px 0 #555566, 12px 12px 0 #555566, 15px 12px 0 #555566, 18px 12px 0 #555566, 21px 12px 0 #555566, 0px 15px 0 #333344, 3px 15px 0 #333344, 6px 15px 0 #333344, 9px 15px 0 #333344, 12px 15px 0 #333344, 15px 15px 0 #333344, 18px 15px 0 #333344, 21px 15px 0 #333344, 0px 18px 0 #444455, 3px 18px 0 #444455, 6px 18px 0 #444455, 9px 18px 0 #444455, 12px 18px 0 #444455, 15px 18px 0 #444455, 18px 18px 0 #444455, 0px 21px 0 #444455, 6px 21px 0 #444455, 12px 21px 0 #444455, 18px 21px 0 #444455, 0px 24px 0 #444455, 3px 24px 0 #444455, 6px 24px 0 #444455, 9px 24px 0 #444455, 12px 24px 0 #444455, 15px 24px 0 #444455, 18px 24px 0 #444455, 3px 27px 0 #555566, 6px 27px 0 #555566, 9px 27px 0 #555566, 12px 27px 0 #555566, 15px 27px 0 #555566; animation: sprite-float 3.3s ease-in-out infinite, sprite-glow-blue 2.5s ease-in-out infinite; } .sprite-pool { box-shadow: 0px 0px 0 #8b6914, 3px 0px 0 #8b6914, 6px 0px 0 #8b6914, 9px 0px 0 #8b6914, 12px 0px 0 #8b6914, 15px 0px 0 #8b6914, 18px 0px 0 #8b6914, 21px 0px 0 #8b6914, 24px 0px 0 #8b6914, 27px 0px 0 #8b6914, 30px 0px 0 #8b6914, 33px 0px 0 #8b6914, 0px 3px 0 #8b6914, 3px 3px 0 #1a7a1a, 6px 3px 0 #1a7a1a, 9px 3px 0 #1a7a1a, 12px 3px 0 #1a7a1a, 15px 3px 0 #1a7a1a, 18px 3px 0 #1a7a1a, 21px 3px 0 #1a7a1a, 24px 3px 0 #1a7a1a, 27px 3px 0 #1a7a1a, 30px 3px 0 #f0f0f0, 33px 3px 0 #8b6914, 0px 6px 0 #8b6914, 3px 6px 0 #1a7a1a, 6px 6px 0 #1a7a1a, 9px 6px 0 #1a7a1a, 12px 6px 0 #1a7a1a, 15px 6px 0 #1a7a1a, 18px 6px 0 #1a7a1a, 21px 6px 0 #1a7a1a, 24px 6px 0 #1a7a1a, 27px 6px 0 #1a7a1a, 30px 6px 0 #1a7a1a, 33px 6px 0 #8b6914, 0px 9px 0 #8b6914, 3px 9px 0 #1a7a1a, 6px 9px 0 #1a7a1a, 9px 9px 0 #1a7a1a, 12px 9px 0 #cc2222, 15px 9px 0 #1a7a1a, 18px 9px 0 #2255cc, 21px 9px 0 #1a7a1a, 24px 9px 0 #1a7a1a, 27px 9px 0 #1a7a1a, 30px 9px 0 #1a7a1a, 33px 9px 0 #8b6914, 0px 12px 0 #8b6914, 3px 12px 0 #1a7a1a, 6px 12px 0 #1a7a1a, 9px 12px 0 #1a7a1a, 12px 12px 0 #1a7a1a, 15px 12px 0 #1a7a1a, 18px 12px 0 #1a7a1a, 21px 12px 0 #1a7a1a, 24px 12px 0 #1a7a1a, 27px 12px 0 #1a7a1a, 30px 12px 0 #1a7a1a, 33px 12px 0 #8b6914, 0px 15px 0 #8b6914, 3px 15px 0 #1a7a1a, 6px 15px 0 #1a7a1a, 9px 15px 0 #1a7a1a, 12px 15px 0 #1a7a1a, 15px 15px 0 #1a7a1a, 18px 15px 0 #1a7a1a, 21px 15px 0 #1a7a1a, 24px 15px 0 #1a7a1a, 27px 15px 0 #1a7a1a, 30px 15px 0 #1a7a1a, 33px 15px 0 #8b6914, 0px 18px 0 #8b6914, 3px 18px 0 #1a7a1a, 6px 18px 0 #1a7a1a, 9px 18px 0 #1a7a1a, 12px 18px 0 #1a7a1a, 15px 18px 0 #1a7a1a, 18px 18px 0 #1a7a1a, 21px 18px 0 #1a7a1a, 24px 18px 0 #1a7a1a, 27px 18px 0 #1a7a1a, 30px 18px 0 #f0f0f0, 33px 18px 0 #8b6914, 0px 21px 0 #8b6914, 3px 21px 0 #8b6914, 6px 21px 0 #8b6914, 9px 21px 0 #8b6914, 12px 21px 0 #8b6914, 15px 21px 0 #8b6914, 18px 21px 0 #8b6914, 21px 21px 0 #8b6914, 24px 21px 0 #8b6914, 27px 21px 0 #8b6914, 30px 21px 0 #8b6914, 33px 21px 0 #8b6914; animation: sprite-float 3.7s ease-in-out infinite; } .sprite-mystery { box-shadow: 0px 0px 0 #ffe000, 3px 0px 0 #ffe000, 6px 0px 0 #ffe000, 9px 0px 0 #ffe000, 12px 0px 0 #ffe000, 15px 0px 0 #ffe000, 0px 3px 0 #ffe000, 3px 3px 0 #1a1a2e, 6px 3px 0 #1a1a2e, 9px 3px 0 #1a1a2e, 12px 3px 0 #1a1a2e, 15px 3px 0 #ffe000, 0px 6px 0 #ffe000, 3px 6px 0 #1a1a2e, 9px 6px 0 #ff8800, 12px 6px 0 #1a1a2e, 15px 6px 0 #ffe000, 0px 9px 0 #ffe000, 3px 9px 0 #1a1a2e, 9px 9px 0 #ff8800, 12px 9px 0 #1a1a2e, 15px 9px 0 #ffe000, 0px 12px 0 #ffe000, 3px 12px 0 #1a1a2e, 9px 12px 0 #1a1a2e, 12px 12px 0 #1a1a2e, 15px 12px 0 #ffe000, 0px 15px 0 #ffe000, 3px 15px 0 #1a1a2e, 6px 15px 0 #ff8800, 9px 15px 0 #1a1a2e, 12px 15px 0 #1a1a2e, 15px 15px 0 #ffe000, 0px 18px 0 #ffe000, 3px 18px 0 #1a1a2e, 6px 18px 0 #1a1a2e, 9px 18px 0 #1a1a2e, 12px 18px 0 #1a1a2e, 15px 18px 0 #ffe000, 0px 21px 0 #ffe000, 3px 21px 0 #ffe000, 6px 21px 0 #ffe000, 9px 21px 0 #ffe000, 12px 21px 0 #ffe000, 15px 21px 0 #ffe000; animation: sprite-float 2.5s ease-in-out infinite, sprite-glow-yellow 2.5s ease-in-out infinite; } .sprite-khabib { box-shadow: 9px 0px 0 #ffffff, 12px 0px 0 #ffffff, 15px 0px 0 #ffffff, 18px 0px 0 #ffffff, 6px 3px 0 #ffffff, 9px 3px 0 #eeeeee, 12px 3px 0 #eeeeee, 15px 3px 0 #eeeeee, 18px 3px 0 #eeeeee, 21px 3px 0 #ffffff, 6px 6px 0 #ffffff, 9px 6px 0 #dddddd, 12px 6px 0 #dddddd, 15px 6px 0 #dddddd, 18px 6px 0 #dddddd, 21px 6px 0 #ffffff, 6px 9px 0 #ffffff, 9px 9px 0 #eeeeee, 12px 9px 0 #eeeeee, 15px 9px 0 #eeeeee, 18px 9px 0 #eeeeee, 21px 9px 0 #ffffff, 9px 12px 0 #f4c2a1, 12px 12px 0 #f4c2a1, 15px 12px 0 #f4c2a1, 18px 12px 0 #f4c2a1, 6px 15px 0 #f4c2a1, 9px 15px 0 #000000, 12px 15px 0 #f4c2a1, 15px 15px 0 #f4c2a1, 18px 15px 0 #000000, 21px 15px 0 #f4c2a1, 6px 18px 0 #f4c2a1, 9px 18px 0 #f4c2a1, 12px 18px 0 #8b4513, 15px 18px 0 #8b4513, 18px 18px 0 #f4c2a1, 21px 18px 0 #f4c2a1, 6px 21px 0 #888888, 9px 21px 0 #888888, 12px 21px 0 #888888, 15px 21px 0 #888888, 18px 21px 0 #888888, 21px 21px 0 #888888, 12px 24px 0 #f4c2a1, 15px 24px 0 #f4c2a1, 6px 27px 0 #1c2e6e, 9px 27px 0 #1c2e6e, 12px 27px 0 #1c2e6e, 15px 27px 0 #1c2e6e, 18px 27px 0 #1c2e6e, 21px 27px 0 #1c2e6e, 3px 30px 0 #f4c2a1, 6px 30px 0 #1c2e6e, 9px 30px 0 #1c2e6e, 12px 30px 0 #1c2e6e, 15px 30px 0 #1c2e6e, 18px 30px 0 #1c2e6e, 21px 30px 0 #1c2e6e, 24px 30px 0 #f4c2a1, 3px 33px 0 #f4c2a1, 6px 33px 0 #1c2e6e, 9px 33px 0 #1c2e6e, 12px 33px 0 #1c2e6e, 15px 33px 0 #1c2e6e, 18px 33px 0 #1c2e6e, 21px 33px 0 #1c2e6e, 24px 33px 0 #f4c2a1, 6px 36px 0 #1c2e6e, 9px 36px 0 #1c2e6e, 12px 36px 0 #1c2e6e, 15px 36px 0 #1c2e6e, 18px 36px 0 #1c2e6e, 21px 36px 0 #1c2e6e, 3px 30px 0 #c8956c, 24px 30px 0 #c8956c, 3px 33px 0 #c8956c, 24px 33px 0 #c8956c, 9px 39px 0 #1c2e6e, 12px 39px 0 #1c2e6e, 15px 39px 0 #1c2e6e, 18px 39px 0 #1c2e6e, 9px 42px 0 #1c2e6e, 12px 42px 0 #1c2e6e, 15px 42px 0 #1c2e6e, 18px 42px 0 #1c2e6e, 6px 45px 0 #333333, 9px 45px 0 #333333, 12px 45px 0 #333333, 15px 45px 0 #333333, 18px 45px 0 #333333, 21px 45px 0 #333333; animation: sprite-float 3.4s ease-in-out infinite, sprite-glow-yellow 2s ease-in-out infinite; } .sprite-tennis { box-shadow: 21px 0px 0 #8b6914, 24px 0px 0 #8b6914, 27px 0px 0 #8b6914, 21px 3px 0 #8b6914, 24px 3px 0 #8b6914, 27px 3px 0 #8b6914, 30px 3px 0 #8b6914, 9px 3px 0 #87ceeb, 12px 3px 0 #87ceeb, 15px 3px 0 #87ceeb, 18px 3px 0 #87ceeb, 21px 3px 0 #87ceeb, 9px 6px 0 #87ceeb, 10px 6px 0 #87ceeb, 11px 6px 0 #87ceeb, 12px 6px 0 #87ceeb, 13px 6px 0 #87ceeb, 14px 6px 0 #87ceeb, 15px 6px 0 #87ceeb, 16px 6px 0 #87ceeb, 17px 6px 0 #87ceeb, 18px 6px 0 #87ceeb, 9px 9px 0 #f4c2a1, 12px 9px 0 #f4c2a1, 15px 9px 0 #f4c2a1, 18px 9px 0 #f4c2a1, 9px 12px 0 #f4c2a1, 12px 12px 0 #000000, 15px 12px 0 #f4c2a1, 18px 12px 0 #000000, 21px 12px 0 #f4c2a1, 9px 15px 0 #f4c2a1, 12px 15px 0 #f4c2a1, 15px 15px 0 #cc6666, 18px 15px 0 #f4c2a1, 21px 15px 0 #f4c2a1, 12px 18px 0 #f4c2a1, 15px 18px 0 #f4c2a1, 9px 21px 0 #3498db, 12px 21px 0 #3498db, 15px 21px 0 #3498db, 18px 21px 0 #3498db, 21px 21px 0 #3498db, 6px 24px 0 #f4c2a1, 9px 24px 0 #3498db, 12px 24px 0 #3498db, 15px 24px 0 #3498db, 18px 24px 0 #3498db, 21px 24px 0 #3498db, 24px 24px 0 #f4c2a1, 6px 27px 0 #f4c2a1, 9px 27px 0 #2980b9, 12px 27px 0 #2980b9, 15px 27px 0 #2980b9, 18px 27px 0 #2980b9, 21px 27px 0 #2980b9, 9px 30px 0 #2980b9, 12px 30px 0 #2980b9, 15px 30px 0 #2980b9, 18px 30px 0 #2980b9, 21px 30px 0 #2980b9, 24px 30px 0 #2980b9, 24px 24px 0 #f4c2a1, 27px 24px 0 #f4c2a1, 27px 21px 0 #e8a020, 30px 18px 0 #e8a020, 33px 15px 0 #e8a020, 30px 21px 0 #aaaaaa, 33px 18px 0 #aaaaaa, 30px 15px 0 #e8a020, 33px 12px 0 #e8a020, 36px 12px 0 #e8a020, 30px 12px 0 #e8a020, 33px 9px 0 #e8a020, 36px 9px 0 #aaaaaa, 39px 9px 0 #e8a020, 33px 15px 0 #aaaaaa, 36px 15px 0 #e8a020, 36px 18px 0 #e8a020, 9px 33px 0 #f4c2a1, 12px 33px 0 #f4c2a1, 18px 33px 0 #f4c2a1, 21px 33px 0 #f4c2a1, 9px 36px 0 #f4c2a1, 12px 36px 0 #f4c2a1, 18px 36px 0 #f4c2a1, 21px 36px 0 #f4c2a1, 6px 39px 0 #ffffff, 9px 39px 0 #ffffff, 12px 39px 0 #ffffff, 15px 39px 0 #ffffff, 18px 39px 0 #ffffff, 21px 39px 0 #ffffff, 24px 39px 0 #ffffff, 6px 42px 0 #333333, 9px 42px 0 #333333, 12px 42px 0 #333333, 15px 42px 0 #333333, 18px 42px 0 #333333, 21px 42px 0 #333333, 24px 42px 0 #333333; animation: sprite-float 3.8s ease-in-out infinite, sprite-glow-teal 2.4s ease-in-out infinite; } .sprite-cricket { box-shadow: 9px 0px 0 #b8860b, 12px 0px 0 #e8c040, 15px 0px 0 #e8c040, 18px 0px 0 #b8860b, 6px 3px 0 #b8860b, 9px 3px 0 #e8c040, 12px 3px 0 #f5e888, 15px 3px 0 #f5e888, 18px 3px 0 #e8c040, 21px 3px 0 #b8860b, 6px 6px 0 #b8860b, 9px 6px 0 #e8c040, 12px 6px 0 #e8c040, 15px 6px 0 #e8c040, 18px 6px 0 #e8c040, 21px 6px 0 #b8860b, 6px 9px 0 #b8860b, 9px 9px 0 #e8c040, 12px 9px 0 #f5e888, 15px 9px 0 #f5e888, 18px 9px 0 #e8c040, 21px 9px 0 #b8860b, 6px 12px 0 #b8860b, 9px 12px 0 #e8c040, 12px 12px 0 #e8c040, 15px 12px 0 #e8c040, 18px 12px 0 #e8c040, 21px 12px 0 #b8860b, 6px 15px 0 #b8860b, 9px 15px 0 #e8c040, 12px 15px 0 #f5e888, 15px 15px 0 #f5e888, 18px 15px 0 #e8c040, 21px 15px 0 #b8860b, 6px 18px 0 #b8860b, 9px 18px 0 #e8c040, 12px 18px 0 #e8c040, 15px 18px 0 #e8c040, 18px 18px 0 #e8c040, 21px 18px 0 #b8860b, 6px 21px 0 #b8860b, 9px 21px 0 #e8c040, 12px 21px 0 #f5e888, 15px 21px 0 #f5e888, 18px 21px 0 #e8c040, 21px 21px 0 #b8860b, 6px 24px 0 #b8860b, 9px 24px 0 #e8c040, 12px 24px 0 #e8c040, 15px 24px 0 #e8c040, 18px 24px 0 #e8c040, 21px 24px 0 #b8860b, 9px 27px 0 #b8860b, 12px 27px 0 #e8c040, 15px 27px 0 #e8c040, 18px 27px 0 #b8860b, 6px 30px 0 #cc2222, 9px 30px 0 #cc2222, 12px 30px 0 #cc2222, 15px 30px 0 #cc2222, 18px 30px 0 #cc2222, 21px 30px 0 #cc2222, 6px 33px 0 #cc2222, 9px 33px 0 #cc2222, 12px 33px 0 #cc2222, 15px 33px 0 #cc2222, 18px 33px 0 #cc2222, 21px 33px 0 #cc2222, 6px 36px 0 #1a3a8a, 9px 36px 0 #1a3a8a, 12px 36px 0 #1a3a8a, 15px 36px 0 #1a3a8a, 18px 36px 0 #1a3a8a, 21px 36px 0 #1a3a8a, 9px 39px 0 #888888, 12px 39px 0 #666666, 15px 39px 0 #888888, 18px 39px 0 #666666, 9px 42px 0 #666666, 12px 42px 0 #888888, 15px 42px 0 #666666, 18px 42px 0 #888888, 9px 45px 0 #888888, 12px 45px 0 #666666, 15px 45px 0 #888888, 18px 45px 0 #666666, 9px 48px 0 #666666, 12px 48px 0 #888888, 15px 48px 0 #666666, 18px 48px 0 #888888, 9px 51px 0 #888888, 12px 51px 0 #666666, 15px 51px 0 #888888, 18px 51px 0 #666666, 9px 54px 0 #666666, 12px 54px 0 #888888, 15px 54px 0 #666666, 18px 54px 0 #888888, 6px 57px 0 #222222, 9px 57px 0 #222222, 12px 57px 0 #222222, 15px 57px 0 #222222, 18px 57px 0 #222222, 21px 57px 0 #222222, 9px 60px 0 #222222, 12px 60px 0 #222222, 15px 60px 0 #222222, 18px 60px 0 #222222; animation: sprite-float 4s ease-in-out infinite, sprite-glow-yellow 2.2s ease-in-out infinite; } .sprite-mtb { box-shadow: 18px 0px 0 #222222, 21px 0px 0 #222222, 24px 0px 0 #222222, 15px 3px 0 #222222, 18px 3px 0 #222222, 21px 3px 0 #222222, 24px 3px 0 #222222, 27px 3px 0 #222222, 18px -3px 0 #222222, 21px -3px 0 #222222, /* visor */ 18px 6px 0 #f4c2a1, 21px 6px 0 #f4c2a1, 24px 6px 0 #f4c2a1, 18px 9px 0 #222222, 21px 9px 0 #f4c2a1, 24px 9px 0 #222222, 15px 12px 0 #111111, 18px 12px 0 #111111, 21px 12px 0 #111111, 24px 12px 0 #111111, 27px 12px 0 #111111, 12px 15px 0 #111111, 15px 15px 0 #111111, 18px 15px 0 #111111, 21px 15px 0 #111111, 24px 12px 0 #111111, 27px 12px 0 #111111, 30px 12px 0 #111111, 33px 12px 0 #f4c2a1, 33px 9px 0 #111111, 15px 18px 0 #e85000, 18px 18px 0 #e85000, 21px 18px 0 #e85000, 24px 18px 0 #e85000, 27px 18px 0 #e85000, 15px 21px 0 #e85000, 18px 21px 0 #e85000, 21px 24px 0 #e85000, 24px 27px 0 #e85000, 27px 24px 0 #e85000, /* thick sloping down tube */ 30px 18px 0 #777777, 30px 21px 0 #777777, 30px 24px 0 #777777, 0px 21px 0 #222222, 3px 18px 0 #222222, 6px 18px 0 #222222, 9px 18px 0 #222222, 9px 21px 0 #222222, 9px 24px 0 #222222, 9px 27px 0 #222222, 6px 30px 0 #222222, 3px 30px 0 #222222, 0px 30px 0 #222222, 0px 27px 0 #222222, 0px 24px 0 #222222, 24px 21px 0 #222222, 27px 18px 0 #222222, 30px 18px 0 #222222, 33px 18px 0 #222222, 33px 21px 0 #222222, 33px 24px 0 #222222, 33px 27px 0 #222222, 30px 30px 0 #222222, 27px 30px 0 #222222, 24px 30px 0 #222222, 24px 27px 0 #222222, 24px 24px 0 #222222, 12px 30px 0 #111111, 15px 33px 0 #111111, 18px 27px 0 #111111, 21px 30px 0 #111111; animation: sprite-float 3.6s ease-in-out infinite, sprite-glow-orange 2s ease-in-out infinite; } /* ── Responsive for new sprites ── */ @media (max-width: 768px) { .sprite-keyboard, .sprite-rose, .sprite-books, .sprite-robot, .sprite-tennis, .sprite-cricket, .sprite-witcher, .sprite-khabib, .sprite-mtb, .sprite-dawn, .sprite-tech, .sprite-pool, .sprite-mystery { transform: scale(0.75); transform-origin: bottom center; } } @media (max-width: 480px) { .sprite-keyboard, .sprite-rose, .sprite-books, .sprite-robot, .sprite-tennis, .sprite-cricket, .sprite-witcher, .sprite-khabib, .sprite-mtb, .sprite-dawn, .sprite-tech, .sprite-pool, .sprite-mystery { transform: scale(0.6); transform-origin: bottom center; } }