.cat-progress-section {
    --arcade-bg: #050510;
    --maze-eaten: 0%;
    --arcade-wall: #2459ff;
    --arcade-wall-soft: rgba(36, 89, 255, 0.36);
    --arcade-dot: #ffe7a3;
    --arcade-yellow: #ffd21f;
    --arcade-pink: #ff6bd6;
    --arcade-cyan: #2de2e6;
    --arcade-orange: #ff9f1c;
    --arcade-blue: #2f80ff;
    --arcade-text: #f8fbff;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 3px;
    margin-bottom: 6px;
    box-shadow: none;
}

.cat-progress-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
}

.cat-progress-track {
    position: relative;
    height: 86px;
    background:
        radial-gradient(circle at 18% 34%, rgba(255, 210, 31, 0.12), transparent 12%),
        linear-gradient(180deg, #070716 0%, var(--arcade-bg) 100%);
    border: 1px solid rgba(36, 89, 255, 0.45);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(45, 226, 230, 0.12), 0 6px 16px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.arcade-score {
    position: absolute;
    top: 8px;
    right: 13px;
    z-index: 7;
    color: var(--arcade-text);
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(45, 226, 230, 0.55);
}

.arcade-full-game-link {
    position: absolute;
    top: 7px;
    left: 13px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 210, 31, 0.74);
    border-radius: 999px;
    background: rgba(5, 5, 16, 0.78);
    color: var(--arcade-yellow);
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 210, 31, 0.2);
}

.arcade-full-game-link:hover {
    color: #050510;
    background: var(--arcade-yellow);
    text-decoration: none;
}

.maze-rail {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 8px;
    border: 2px solid var(--arcade-wall);
    border-left-width: 0;
    border-right-width: 0;
    box-shadow: 0 0 10px var(--arcade-wall-soft);
    z-index: 2;
    pointer-events: none;
}

.maze-rail-top {
    top: 22px;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
}

.maze-rail-bottom {
    bottom: 7px;
    border-top: none;
    border-radius: 0 0 9px 9px;
}

.maze-dots {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 49px;
    height: 8px;
    background:
        radial-gradient(circle, var(--arcade-dot) 0 3px, transparent 3.5px) 0 0 / 42px 8px repeat-x;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

.maze-dots::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    bottom: -2px;
    width: var(--maze-eaten);
    background: linear-gradient(180deg, #070716 0%, var(--arcade-bg) 100%);
    box-shadow: 8px 0 12px rgba(5, 5, 16, 0.85);
}

.treat {
    position: absolute;
    top: 34px;
    width: 30px;
    height: 30px;
    z-index: 5;
    transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    pointer-events: none;
}

.treat[data-treat="10"] { left: 11%; }
.treat[data-treat="20"] { left: 20%; }
.treat[data-treat="30"] { left: 29%; }
.treat[data-treat="40"] { left: 38%; }
.treat[data-treat="50"] { left: 47%; }
.treat[data-treat="60"] { left: 56%; }
.treat[data-treat="70"] { left: 65%; }
.treat[data-treat="80"] { left: 74%; }
.treat[data-treat="90"] { left: 83%; }
.treat[data-treat="100"] { left: 90%; }

.pellet::before,
.pellet::after {
    content: "";
    position: absolute;
    display: block;
}

.pellet-small::before {
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--arcade-dot);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 231, 163, 0.8);
}

.pellet-power::before {
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--arcade-dot);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px rgba(255, 231, 163, 0.92);
}

.treat.eating {
    transform: scale(1.15);
    filter: brightness(1.25);
}

.treat.eaten {
    opacity: 0;
    transform: scale(0.4);
}

.arcade-enemies {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.enemy-ghost {
    --enemy-eye-x: -3px;
    --enemy-eye-y: 0px;
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 32px;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ghost-color) 58%, transparent));
    opacity: 1;
    will-change: translate, transform, opacity;
}

.enemy-ghost::before {
    content: "";
    position: absolute;
    inset: 0 1px 0 1px;
    background: var(--ghost-color);
    border-radius: 15px 15px 5px 5px;
    clip-path: polygon(0 100%, 0 38%, 8% 16%, 25% 0, 75% 0, 92% 16%, 100% 38%, 100% 100%, 84% 82%, 68% 100%, 52% 82%, 36% 100%, 20% 82%);
}

.enemy-ghost::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    filter: blur(2px);
}

.enemy-eye {
    position: absolute;
    top: 9px;
    width: 8px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
    overflow: hidden;
}

.enemy-eye-left { left: 7px; }
.enemy-eye-right { right: 7px; }

.enemy-pupil {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #111827;
    transform: translate(-3px, 0);
    animation: enemyLookLeft 0.9s ease-in-out infinite;
}

.enemy-ghost[data-direction="right"] .enemy-pupil {
    animation-name: enemyLookRight;
}

.enemy-pink { --ghost-color: var(--arcade-pink); }
.enemy-cyan { --ghost-color: var(--arcade-cyan); }
.enemy-orange { --ghost-color: var(--arcade-orange); }

.enemy-ghost.is-eaten {
    animation: ghostEaten 0.42s ease forwards;
}

.enemy-ghost.is-respawning {
    animation: ghostDropWobble 0.36s ease-in-out infinite alternate;
}

@keyframes enemyLookLeft {
    0%, 100% { transform: translate(-3px, 0); }
    50% { transform: translate(-2px, 1px); }
}

@keyframes enemyLookRight {
    0%, 100% { transform: translate(3px, 0); }
    50% { transform: translate(2px, 1px); }
}

@keyframes ghostEaten {
    0% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1.25) drop-shadow(0 0 12px var(--arcade-yellow)); }
    55% { transform: scale(1.28) rotate(-8deg); opacity: 0.92; filter: brightness(1.8) drop-shadow(0 0 16px var(--arcade-yellow)); }
    100% { transform: scale(0.18) rotate(14deg); opacity: 0; filter: brightness(2) drop-shadow(0 0 18px var(--arcade-yellow)); }
}

@keyframes ghostDropWobble {
    0% { transform: translateY(-2px) scale(0.88); opacity: 0.78; }
    100% { transform: translateY(2px) scale(1); opacity: 1; }
}

.progress-cat {
    position: absolute;
    left: 0%;
    top: 29px;
    width: 42px;
    height: 42px;
    z-index: 10;
    transition: left 0.34s steps(5, end);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
}

.cat-body {
    position: relative;
    width: 42px;
    height: 42px;
    font-size: 0;
    line-height: 0;
}

.arcade-chomper {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 185, 0.95) 0 8%, transparent 9%),
        radial-gradient(circle at 35% 36%, #ffe66f 0 0, var(--arcade-yellow) 50%, #f2a900 100%);
    box-shadow: 0 0 18px rgba(255, 210, 31, 0.82), inset -5px -5px 0 rgba(197, 125, 0, 0.45);
}

.arcade-chomper::before {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    width: 54%;
    height: 62%;
    background: var(--arcade-bg);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    transform: translateY(-50%) scaleY(1);
    transform-origin: right center;
    animation: chomperMouth 0.42s steps(2, end) infinite;
}

.arcade-chomper::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111827;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.progress-cat.eating .cat-body {
    animation: chomperPulse 0.24s ease;
}

.progress-cat.eating .arcade-chomper::before {
    animation-duration: 0.34s;
}

.progress-cat[data-level="10"] .arcade-chomper {
    animation: chomperWin 0.34s ease infinite;
}

@keyframes chomperMouth {
    0%, 100% { transform: translateY(-50%) scaleY(1); }
    50% { transform: translateY(-50%) scaleY(0.12); }
}

@keyframes chomperPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes chomperWin {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.08) rotate(-5deg); }
}

.cat-message,
.progress-cat.show-message .cat-message {
    display: none;
}

.cat-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding: 1px 2px 0;
    background: transparent;
    border: none;
}

.cat-status-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-mood {
    font-size: 13px;
    font-weight: 800;
    color: #075985;
    text-shadow: none;
}

.treats-eaten {
    font-size: 12px;
    color: #1e293b;
    font-weight: 700;
    white-space: nowrap;
}

html.dark-theme .cat-mood {
    color: #67e8f9;
    text-shadow: 0 0 8px rgba(45, 226, 230, 0.45);
}

html.dark-theme .treats-eaten {
    color: #e2e8f0;
}

.cat-progress-section .progress-percentage {
    background: #050510;
    color: var(--arcade-yellow);
    border: 1px solid rgba(255, 210, 31, 0.36);
    padding: 3px 9px;
    border-radius: 999px;
    font-family: "Courier New", monospace;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 1px;
}

.sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--arcade-yellow);
    border-radius: 50%;
    font-size: 0;
    pointer-events: none;
    animation: arcadePop 0.34s ease-out forwards;
    z-index: 8;
}

@keyframes arcadePop {
    0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
    100% { transform: translate(-14px, -12px) scale(0.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .arcade-chomper::before,
    .enemy-ghost,
    .enemy-pupil,
    .progress-cat.eating .cat-body,
    .progress-cat[data-level="10"] .arcade-chomper {
        animation: none;
    }
}

@media (max-width: 768px) {
    .cat-progress-section {
        padding: 3px 0 2px;
        margin-bottom: 8px;
    }

    .cat-progress-track {
        height: 76px;
        border-radius: 8px;
    }

    .arcade-score {
        font-size: 10px;
    }

    .progress-cat {
        transform: translateX(0) scale(0.82);
        transform-origin: center;
    }

    .treat {
        transform: scale(0.82);
        transform-origin: center;
    }

    .cat-status {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cat-progress-track {
        height: 68px;
    }

    .maze-dots {
        background-size: 30px 8px;
    }

    .progress-cat {
        transform: translateX(0) scale(0.72);
    }

    .treat {
        transform: scale(0.64);
    }
}