.space-invader2 {
    /* Set the color of all the SVG rectangles */
    fill: red;
    /* Use standard CSS to control the size */
    width: 11em;
    height: 8em;
    /* Optional: Adds a little breathing room inside the purple box */
    margin: 20px;
}

/* --- Base Setup --- */
.pacman-ghost {
    width: 11em;
    height: 14em;
    margin: 20px;
    cursor: pointer;
    /* Gives a nice interaction cue */
}

/* Base Colors */
.eye-white {
    fill: white;
}

.iris {
    fill: black;
}

.scared-mouth {
    stroke: transparent;
}

/* Invisible by default */

/* Ghost Specific Colors */
.blinky .ghost-body {
    fill: red;
}

.pinky .ghost-body {
    fill: pink;
}

.inky .ghost-body {
    fill: cyan;
}

.clyde .ghost-body {
    fill: orange;
}

/* Optional: Add a snappy transition so the color swap isn't harsh */
.pacman-ghost * {
    transition: fill 0.15s, stroke 0.15s;
}

/* --- PILL MODE (Hover Magic) --- */

/* 1. Turn the body dark blue */
.pacman-ghost:hover .ghost-body {
    fill: #2222ff;
}

/* 2. Hide the eye whites by making them match the dark blue body */
.pacman-ghost:hover .eye-white {
    fill: #2222ff;
}

/* 3. Turn the irises into the classic peach/pink squares */
.pacman-ghost:hover .iris {
    fill: #ffb8ff;
}

/* 4. Reveal the wavy mouth by coloring the stroke */
.pacman-ghost:hover .scared-mouth {
    stroke: #ffb8ff;
}

.pacman {
    fill: yellow;
    width: 13em;
    height: 13em;
    margin: 20px;
    cursor: pointer;
    /* Gives you the hand icon so you know it's interactive */
}

/* --- The Static Resting State --- */
/* By default, keep the mouth open and hide the closed frame */
.frame-open {
    opacity: 1;
}

.frame-closed {
    opacity: 0;
}

/* --- The Animation Engine --- */
@keyframes chomp-open {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes chomp-closed {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* --- HOVER MAGIC --- */
/* Only trigger the flashing keyframes when the mouse is over Pac-Man */
.pacman:hover .frame-open {
    animation: chomp-open 0.3s steps(1) infinite;
}

.pacman:hover .frame-closed {
    animation: chomp-closed 0.3s steps(1) infinite;
}

.cat-face {
    /* We use 16em because she is defined on a 16x16 grid, unlike the 11x14 ghosts */
    width: 16em;
    height: 16em;
    margin: 20px;
}

/* Base class styling (optional: kill the white backgrounds in SVG for transparency) */
.cat-face * {
    shape-rendering: crispedges;
    /* Keeps the pixels sharp when scaling */
}

/* --- THE UNIFIED OUTLINE --- */
/* Target the cohesive group and give it a clean border */
.cat-face:hover .unified-shape {
    /* Use functional color names, you cannot name a specific color. 
     This applies a unified outline that wraps the entire silhouette. */
    stroke: contrast_shade;
    stroke-width: 1px;
    paint-order: markers fill stroke;
    /* Layer the stroke *behind* the pixels for that puffy look */
    cursor: pointer;
}