@font-face {
    font-family: "Bubbly V3";
    src: url("https://db.onlinewebfonts.com/t/a5cf53ac618e3be8f03a85a9e83b9f2d.eot");
    src: url("https://db.onlinewebfonts.com/t/a5cf53ac618e3be8f03a85a9e83b9f2d.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/a5cf53ac618e3be8f03a85a9e83b9f2d.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/a5cf53ac618e3be8f03a85a9e83b9f2d.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/a5cf53ac618e3be8f03a85a9e83b9f2d.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/a5cf53ac618e3be8f03a85a9e83b9f2d.svg#Bubbly V3")format("svg");
}

@font-face {
    font-family: "Manline Slabs";
    src: url("assets/fonts/ManlineSlabs-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@keyframes shake {
    0%, 100% { transform: translateY(0) scale(1); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(-1px) scale(1.1); }
    20%, 40%, 60%, 80% { transform: translateY(1px) scale(1.1); }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    line-height: 1.6;
    color: #333;
    background: #ffffff;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image: 
        radial-gradient(ellipse 3px 2px at 15% 25%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 4px at 45% 8%, #000 100%, transparent 100%),
        radial-gradient(ellipse 4px 3px at 78% 35%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 3px at 23% 67%, #000 100%, transparent 100%),
        radial-gradient(ellipse 5px 2px at 89% 12%, #000 100%, transparent 100%),
        radial-gradient(ellipse 3px 4px at 12% 89%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 67% 54%, #000 100%, transparent 100%),
        radial-gradient(ellipse 4px 2px at 34% 78%, #000 100%, transparent 100%),
        radial-gradient(ellipse 3px 3px at 91% 43%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 5px at 56% 19%, #000 100%, transparent 100%),
        radial-gradient(ellipse 6px 3px at 8% 56%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 3px at 72% 91%, #000 100%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 39% 23%, #000 100%, transparent 100%),
        radial-gradient(ellipse 3px 2px at 85% 67%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 4px at 19% 41%, #000 100%, transparent 100%),
        radial-gradient(ellipse 5px 2px at 63% 85%, #000 100%, transparent 100%),
        radial-gradient(ellipse 3px 3px at 27% 14%, #000 100%, transparent 100%),
        radial-gradient(ellipse 2px 2px at 94% 72%, #000 100%, transparent 100%),
        radial-gradient(ellipse 4px 3px at 41% 58%, #000 100%, transparent 100%),
        radial-gradient(ellipse 3px 4px at 76% 29%, #000 100%, transparent 100%);
    background-size: 
        12px 15px, 18px 11px, 14px 19px, 16px 13px, 11px 17px,
        15px 12px, 13px 16px, 19px 14px, 17px 11px, 12px 18px,
        16px 15px, 14px 12px, 11px 19px, 18px 13px, 15px 17px,
        13px 14px, 17px 16px, 12px 11px, 19px 18px, 14px 15px;
    animation: filmGrainBlobs 0.12s infinite linear;
}

@keyframes filmGrainBlobs {
    0% { 
        background-position: 
            1px 2px, 3px 1px, 0px 4px, 2px 0px, 4px 3px,
            1px 5px, 3px 2px, 0px 1px, 2px 4px, 4px 0px,
            1px 3px, 3px 5px, 0px 2px, 2px 1px, 4px 4px,
            1px 0px, 3px 3px, 0px 5px, 2px 2px, 4px 1px;
    }
    14% { 
        background-position: 
            2px 1px, 0px 4px, 4px 2px, 1px 3px, 3px 0px,
            0px 2px, 2px 4px, 4px 1px, 1px 0px, 3px 5px,
            2px 3px, 0px 0px, 4px 5px, 1px 2px, 3px 1px,
            0px 4px, 2px 0px, 4px 3px, 1px 4px, 3px 2px;
    }
    28% { 
        background-position: 
            0px 3px, 2px 0px, 1px 4px, 4px 1px, 0px 2px,
            3px 4px, 1px 1px, 2px 3px, 4px 0px, 0px 5px,
            3px 2px, 1px 4px, 2px 1px, 4px 3px, 0px 0px,
            3px 5px, 1px 2px, 2px 4px, 4px 1px, 0px 3px;
    }
    42% { 
        background-position: 
            3px 4px, 1px 2px, 2px 0px, 0px 5px, 4px 1px,
            2px 3px, 4px 0px, 1px 4px, 3px 2px, 0px 1px,
            1px 5px, 4px 3px, 3px 1px, 0px 4px, 2px 2px,
            4px 0px, 1px 3px, 3px 4px, 0px 2px, 2px 5px;
    }
    56% { 
        background-position: 
            4px 0px, 0px 3px, 3px 1px, 2px 4px, 1px 2px,
            4px 5px, 0px 1px, 3px 3px, 2px 0px, 1px 4px,
            0px 2px, 3px 0px, 4px 4px, 2px 3px, 1px 1px,
            0px 5px, 4px 2px, 3px 4px, 2px 1px, 1px 3px;
    }
    70% { 
        background-position: 
            1px 1px, 4px 5px, 0px 2px, 3px 3px, 2px 4px,
            1px 0px, 3px 2px, 4px 4px, 0px 3px, 2px 1px,
            4px 2px, 1px 5px, 0px 0px, 3px 4px, 4px 1px,
            2px 3px, 0px 4px, 1px 2px, 3px 0px, 4px 5px;
    }
    84% { 
        background-position: 
            2px 5px, 3px 2px, 4px 0px, 1px 4px, 0px 1px,
            2px 2px, 4px 3px, 1px 5px, 3px 0px, 4px 4px,
            0px 3px, 2px 1px, 1px 2px, 4px 5px, 3px 3px,
            0px 0px, 2px 4px, 4px 1px, 1px 3px, 3px 2px;
    }
    100% { 
        background-position: 
            0px 4px, 2px 3px, 1px 1px, 4px 0px, 3px 5px,
            0px 0px, 1px 4px, 2px 2px, 4px 3px, 3px 1px,
            2px 0px, 4px 4px, 0px 5px, 1px 3px, 2px 1px,
            4px 2px, 3px 0px, 1px 5px, 0px 3px, 2px 4px;
    }
}

.cat-prints::before,
.cat-prints::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.15;
}

.cat-prints::before {
    background-image: 
        radial-gradient(circle at 10% 10%, #666 2px, transparent 2px),
        radial-gradient(circle at 25% 35%, #666 1.5px, transparent 1.5px),
        radial-gradient(circle at 60% 20%, #666 2px, transparent 2px),
        radial-gradient(circle at 80% 45%, #666 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 70%, #666 2px, transparent 2px),
        radial-gradient(circle at 45% 85%, #666 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 75%, #666 2px, transparent 2px),
        radial-gradient(circle at 90% 15%, #666 1.5px, transparent 1.5px);
    background-size: 200px 200px, 150px 150px, 180px 180px, 160px 160px, 220px 220px, 140px 140px, 190px 190px, 170px 170px;
    transform: scale(0.9) rotate(12deg);
}

.cat-prints::after {
    background-image: 
        radial-gradient(circle at 30% 60%, #888 1.8px, transparent 1.8px),
        radial-gradient(circle at 85% 25%, #888 1.3px, transparent 1.3px),
        radial-gradient(circle at 5% 40%, #888 1.7px, transparent 1.7px),
        radial-gradient(circle at 55% 5%, #888 1.4px, transparent 1.4px),
        radial-gradient(circle at 70% 90%, #888 1.9px, transparent 1.9px),
        radial-gradient(circle at 35% 15%, #888 1.2px, transparent 1.2px);
    background-size: 130px 130px, 175px 175px, 145px 145px, 185px 185px, 155px 155px, 195px 195px;
    transform: scale(1.1) rotate(-8deg);
    animation: float 20s ease-in-out infinite alternate;
}

.cat-prints {
    position: relative;
}

.cat-prints .paw-1 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    top: 12%;
    left: 8%;
    transform: rotate(25deg) scale(0.9);
    opacity: 0.3;
    z-index: -1;
}

.cat-prints .paw-2 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    top: 25%;
    right: 15%;
    transform: rotate(-45deg) scale(1.2);
    opacity: 0.25;
    z-index: -1;
}

.cat-prints .paw-3 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    top: 45%;
    left: 5%;
    transform: rotate(65deg) scale(0.8);
    opacity: 0.2;
    z-index: -1;
}

.cat-prints .paw-4 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 55px;
    height: 55px;
    top: 60%;
    right: 10%;
    transform: rotate(-15deg) scale(1.1);
    opacity: 0.3;
    z-index: -1;
}

.cat-prints .paw-5 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    top: 75%;
    left: 20%;
    transform: rotate(90deg) scale(1.3);
    opacity: 0.25;
    z-index: -1;
}

.cat-prints .paw-6 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 65px;
    height: 65px;
    top: 35%;
    left: 50%;
    transform: rotate(-70deg) scale(0.85);
    opacity: 0.2;
    z-index: -1;
}

.cat-prints .paw-7 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    top: 85%;
    right: 25%;
    transform: rotate(15deg) scale(1.0);
    opacity: 0.3;
    z-index: -1;
}

.cat-prints .paw-8 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 75px;
    height: 75px;
    top: 15%;
    left: 75%;
    transform: rotate(-30deg) scale(0.7);
    opacity: 0.25;
    z-index: -1;
}

.cat-prints .paw-9 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    top: 55%;
    left: 85%;
    transform: rotate(120deg) scale(1.4);
    opacity: 0.2;
    z-index: -1;
}

.cat-prints .paw-10 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    top: 90%;
    left: 45%;
    transform: rotate(-85deg) scale(0.6);
    opacity: 0.3;
    z-index: -1;
}

.cat-prints .paw-11 {
    position: fixed;
    background-image: url('assets/images/mewgenicspaw.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 55px;
    height: 55px;
    bottom: 35%;
    left: 30%;
    transform: rotate(45deg) scale(0.9);
    opacity: 0.2;
    z-index: -1;
}

@keyframes float {
    0% { transform: scale(1.1) rotate(-8deg) translateY(0px); }
    100% { transform: scale(1.1) rotate(-8deg) translateY(-10px); }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #ddd;
    position: relative;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.02) 11px,
        rgba(0, 0, 0, 0.02) 12px
    );
}

.logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.logo {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1;
}

.logo-video {
    transition: opacity 0.5s ease-in-out;
}

.logo-image {
    opacity: 0;
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
    filter: none;
}

.logo-image.with-shadow {
    filter: drop-shadow(
        0 0 10px rgba(0, 0, 0, 0.3)
    ) drop-shadow(
        0 0 20px rgba(0, 0, 0, 0.2)
    ) drop-shadow(
        0 0 30px rgba(0, 0, 0, 0.1)
    ) drop-shadow(
        2px 2px 4px rgba(0, 0, 0, 0.2)
    );
}

.tagline {
    font-family: 'Nosifer', cursive;
    font-size: 1.1rem;
    color: #666;
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

main {
    padding: 4rem 0;
}

.main-nav {
    padding: 0;
    position: relative;
    margin-top: 1rem;
}

.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    font-size: 1.1rem;
    padding: 0.5rem 1rem 0.3rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: block;
    border-bottom: 2px solid transparent;
}

.nav-link img {
    height: 40px;
    width: auto;
    transition: all 0.3s ease;
    filter: brightness(0.8);
}

.nav-link:hover img {
    filter: brightness(1);
    animation: shake 0.5s ease-in-out;
}

.nav-link[data-route="meow"]:hover img {
    animation: none;
}

.nav-link.active {
    border-bottom: 3px solid #000 !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.nav-link.active img {
    filter: brightness(1.2);
}

.nav-link.active img {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.music-controls {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    z-index: 1000;
}

.music-buttons {
    display: flex;
    gap: 5px;
    align-self: flex-end;
}

.now-playing {
    color: #000;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    text-align: right;
    width: 200px;
}

.music-btn {
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.route-section {
    min-height: 60vh;
    display: none;
}

.route-section.active {
    display: block;
}

.content-section {
    padding: 3rem 0;
    text-align: center;
}

.content-section h2 {
    font-family: 'Bubbly V3', 'Creepster', cursive;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.wishlist-content, .credits-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.game-item, .credit-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.game-item h3, .credit-item h3 {
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    color: #333;
    margin-bottom: 1rem;
}

.steam-link {
    display: inline-block;
    background: #1b2838;
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
    transition: background 0.3s ease;
}

.steam-link:hover {
    background: #2a475e;
}

.wishlist-stats {
    background: rgba(27, 40, 56, 0.1);
    border: 1px solid #1b2838;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
}

.wishlist-stats p {
    margin: 0.5rem 0;
    color: #1b2838;
}

.wishlist-stats strong {
    color: #1b2838;
}

.character-backgrounds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
}

.char-bg {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
}

.char-radicalrat {
    background-image: url('assets/images/radicalrat.png');
    width: 150px;
    height: 150px;
    top: 20%;
    left: 10%;
    transform: rotate(-15deg) scale(0.8);
}

.char-stacy {
    background-image: url('assets/images/stacy.png');
    width: 120px;
    height: 120px;
    top: 60%;
    right: 15%;
    transform: rotate(25deg) scale(1.2);
}

.char-guillotina {
    background-image: url('assets/images/guillotina.png');
    width: 180px;
    height: 180px;
    top: 10%;
    right: 20%;
    transform: rotate(-30deg) scale(0.6);
}

.char-mrtinkles {
    background-image: url('assets/images/mrtinkles.png');
    width: 140px;
    height: 140px;
    bottom: 30%;
    left: 20%;
    transform: rotate(45deg) scale(0.9);
    filter: grayscale(100%);
}

.char-tracy {
    background-image: url('assets/images/tracy.png');
    width: 160px;
    height: 160px;
    bottom: 10%;
    right: 10%;
    transform: rotate(-20deg) scale(0.7);
    filter: grayscale(100%);
}

.char-doctor {
    background-image: url('assets/images/doctor.png');
    width: 130px;
    height: 130px;
    top: 65%;
    left: 5%;
    transform: rotate(60deg) scale(1.1);
    filter: grayscale(100%);
}

.char-frank {
    background-image: url('assets/images/frank.png');
    width: 170px;
    height: 170px;
    top: 70%;
    left: 60%;
    transform: rotate(-40deg) scale(0.8);
    filter: grayscale(100%);
}

.char-butch {
    background-image: url('assets/images/butch.png');
    width: 140px;
    height: 140px;
    top: 70%;
    left: 50%;
    transform: rotate(35deg) scale(0.9) translateX(-50%);
    filter: grayscale(100%);
}

.upload-section {
    background: rgba(250, 250, 250, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 4rem;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
    position: relative;
    z-index: 2;
}

.upload-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #eee, #f5f5f5, #eee, #f5f5f5);
    border-radius: 22px;
    z-index: -1;
}

.upload-area {
    border: 3px dashed #999;
    border-radius: 15px;
    padding: 4rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    position: relative;
    overflow: hidden;
    border-style: dashed;
    border-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cpattern id='dashed' patternUnits='userSpaceOnUse' width='10' height='10'%3e%3cpath d='m0,5l10,0' stroke='%23999' stroke-width='2' stroke-dasharray='2,3,1,2'/%3e%3c/pattern%3e%3c/defs%3e%3crect width='100' height='100' fill='url(%23dashed)'/%3e%3c/svg%3e") 3;
}

.upload-area:hover {
    border-color: #666;
    background: transparent;
    transform: translateY(-2px);
}

.upload-area.dragover {
    border-color: #333;
    background: transparent;
}

.upload-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

.upload-area h2 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-family: 'Bubbly V3', 'Creepster', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 2px;
}

.upload-area p {
    color: #666;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.upload-btn {
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    color: #333;
    border: 2px solid #999;
    padding: 1rem 2rem;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #666;
    background: linear-gradient(45deg, #e0e0e0, #d0d0d0);
}

.mutation-description {
    margin-top: 1rem;
    text-align: center;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 2px solid #ccc;
    backdrop-filter: blur(5px);
}

.mutation-description p {
    margin: 0;
    font-size: 1rem;
}

.preview-section {
    margin-top: 3rem;
}

.image-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}

.original-image, .mutated-image {
    text-align: center;
}

.original-image h3, .mutated-image h3 {
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.3rem;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

.original-image img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 15px;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    border: 2px solid #ddd;
}

.arrow {
    font-size: 2rem;
    color: #333;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.paw-triangle {
    position: absolute;
    width: 72px;
    height: 72px;
    z-index: -1;
    opacity: 0.3;
    filter: grayscale(1) brightness(0.4);
    transform: rotate(90deg);
}

.arrow-icon {
    width: 48px;
    height: 48px;
    filter: grayscale(1) brightness(0.6);
    transform: rotate(90deg) translateX(-15px);
    animation: pulse 2s infinite;
    position: relative;
    z-index: 1;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; transform: scale(1) rotate(90deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(90deg); }
}

.mutation-placeholder {
    width: 100%;
    min-height: 200px;
    background: 
        linear-gradient(45deg, 
            rgba(240, 240, 240, 0.9) 25%, 
            rgba(250, 250, 250, 0.9) 25%, 
            rgba(250, 250, 250, 0.9) 50%, 
            rgba(240, 240, 240, 0.9) 50%, 
            rgba(240, 240, 240, 0.9) 75%, 
            rgba(250, 250, 250, 0.9) 75%);
    background-size: 20px 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #666;
    position: relative;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.05);
    border: 2px solid #ddd;
    font-style: italic;
}

.loading-spinner {
    font-size: 2rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinning-paw {
    width: 32px;
    height: 32px;
    animation: spin 2s linear infinite;
    filter: grayscale(1) brightness(0.8);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mutation-result {
    max-width: 100%;
    max-height: 300px;
    border-radius: 15px;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    border: 2px solid #ddd;
}

.controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mutate-btn, .download-btn, .reset-btn {
    padding: 1rem 2rem;
    border: 2px solid;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.mutate-btn {
    background: linear-gradient(45deg, #e0e0e0, #d0d0d0);
    color: #333;
    border-color: #999;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
}

.btn-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0.3);
}

.mutate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #666;
    background: linear-gradient(45deg, #d0d0d0, #c0c0c0);
}

.face-toggle-btn {
    background: #4CAF50;
    color: white;
    border: 2px solid #45a049;
    font-family: 'Manline Slabs', serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 12px 24px;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.face-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.download-btn {
    background: linear-gradient(45deg, #f0f0f0, #e8e8e8);
    color: #333;
    border-color: #aaa;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #777;
    background: linear-gradient(45deg, #e8e8e8, #d8d8d8);
}

.reset-btn {
    background: linear-gradient(45deg, #f5f5f5, #eeeeee);
    color: #333;
    border-color: #bbb;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #888;
    background: linear-gradient(45deg, #eeeeee, #dedede);
}

footer {
    background: rgba(250, 250, 250, 0.95);
    color: #000;
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
    border-top: 2px solid #ddd;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        rgba(0, 0, 0, 0.02) 16px,
        rgba(0, 0, 0, 0.02) 17px
    );
}

footer p {
    margin-bottom: 0.5rem;
    font-family: 'Bubbly V3', 'Metal Mania', cursive;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

footer .contact-info {
    opacity: 0.4;
    font-size: 0.8em;
    margin-top: 1rem;
}

footer small {
    opacity: 0.7;
    font-style: italic;
    color: #333;
}

@media (max-width: 768px) {
    .logo {
        font-size: 2rem;
    }
    
    .tagline {
        font-size: 1rem;
    }
    
    .upload-section {
        padding: 2rem 1rem;
    }
    
    .image-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .arrow {
        transform: rotate(90deg);
    }
    
    .controls {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== DRAW ROUTE STYLES ===== */
.draw-container {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.draw-container::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: -2rem;
    right: -2rem;
    bottom: -2rem;
    background: white;
    z-index: -1;
    border-radius: 20px;
}

.draw-disclaimer {
    background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 50%, #ffffff 100%);
    background-size: 200% 200%;
    color: white;
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1);
    text-align: center;
    font-family: 'Bubbly V3', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}

.draw-disclaimer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 4px);
    pointer-events: none;
    opacity: 0.3;
}

.draw-disclaimer p {
    position: relative;
    z-index: 1;
}

.draw-interface {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}

.draw-sidebar {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 2rem;
}

.draw-sidebar h3 {
    font-family: 'Bubbly V3', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.pixels-counter {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.pixel-count {
    font-size: 4rem;
    font-weight: bold;
    color: #000000;
    margin: 0.5rem 0;
}

.cooldown-timer {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    min-height: 20px;
}

.color-picker-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.color-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 1rem;
}

.color-btn {
    width: 100%;
    height: 50px;
    border: 3px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.color-btn.active {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.custom-color {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.custom-color label {
    font-size: 0.9rem;
    color: #666;
}

#customColorPicker {
    width: 50px;
    height: 50px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
}

.selected-color {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.color-display {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #ddd;
}

.tool-selection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.tool-btn {
    padding: 1.2rem;
    background: white;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-family: 'Bubbly V3', sans-serif;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tool-btn:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.tool-btn.active {
    background: white;
    color: #333;
    border: 3px solid;
    border-image: linear-gradient(135deg, #888 0%, #000 100%) 1;
    box-shadow: none;
}

.zoom-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.zoom-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.5rem;
    font-style: italic;
}

.canvas-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #f0f0f0;
}

.reset-btn {
    padding: 0.8rem;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Bubbly V3', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
}

.reset-btn:active {
    transform: translateY(0);
}

.reset-count-btn {
    padding: 0.8rem;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Bubbly V3', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.reset-count-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.reset-count-btn:active {
    transform: translateY(0);
}

.zoom-btn {
    padding: 0.8rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Bubbly V3', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zoom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.zoom-btn:active {
    transform: translateY(0);
}

.zoom-level {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-weight: bold;
}

.canvas-container {
    position: relative;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    overflow: hidden;
}

#drawCanvas {
    max-width: 100%;
    max-height: 800px;
    cursor: crosshair;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pixel-preview {
    position: fixed;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    display: none;
    border-radius: 2px;
    z-index: 10000;
}

.pixel-preview.active {
    display: block;
}

@media (max-width: 1024px) {
    .draw-interface {
        grid-template-columns: 1fr;
    }
    
    .draw-sidebar {
        position: static;
    }
    
    .canvas-container {
        min-height: 400px;
    }
}