@font-face {
    font-family: 'GameFont';
    src: url('font.otf');
}

.game-font {
    font-family: 'GameFont', sans-serif;
    color: white;
    text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 5px;
    pointer-events: none;
}
* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    draggable: false;
}

#health-bar {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url('health_bar.png');
    background-size: auto 500%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0%;
    transition: opacity 1s ease, background-position-y 0.2s ease;
    z-index: 20;
    image-rendering: auto;
    image-rendering: pixelated;
}

#health-bar.hidden {
    opacity: 0;
    pointer-events: none;
}

img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

#start-btn {
    pointer-events: auto;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #87CEEB; /* Sky color */
}

#game-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

@media screen and (orientation: portrait) {
    #game-container {
        width: 100vh; 
        height: 100vw; 
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%; /* Changed from 'cover' to prevent horizontal cropping */
    background-position: center bottom;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.layer-1 {
    background-image: url('Background/1.png');
}

.layer-2 {
    background-image: url('Background/2.png');
}

/* For infinite scrolling */
.cloud-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* Double width of game container */
    height: 100%;
}

.cloud-img {
    position: absolute;
    top: 0;
    width: 50%; /* 50% of parent = 100% of game-container */
    height: 100%;
    background-size: 100% 100%; /* Prevents seam by stretching to bounds exactly */
    background-position: left bottom;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* Position the two halves */
.cloud-layer > div:nth-child(1) {
    left: 0;
}
.cloud-layer > div:nth-child(2) {
    left: 50%; /* Starts exactly where the first one ends */
}

.layer-3 {
    background-image: url('Background/3.png');
}

.layer-4 {
    background-image: url('Background/4.png');
}

@keyframes slideRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.slow-clouds {
    animation: slideRight 120s linear infinite;
    transform: translateX(-50%);
}

.fast-clouds {
    animation: slideRight 60s linear infinite;
    transform: translateX(-50%);
}

/* Start Menu */
#start-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 1s ease;
    gap: 30px;
}

#start-text {
    width: 80%;
    max-width: 800px;
    image-rendering: pixelated;
}

#start-btn {
    width: 15%;
    max-width: 150px;
    cursor: pointer;
    transition: filter 0.2s ease;
    image-rendering: pixelated;
}

#start-btn:hover {
    filter: brightness(0.7);
}

#start-menu.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Player Character */
#player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    max-width: 400px;
    z-index: 5;
    transition: opacity 1.5s ease;
}

@media screen and (orientation: portrait) {
    #player {
        width: 28%; /* Keeps it safely hugging the boundaries naturally when sideways */
    }
}

#player img {
    width: 100%;
    height: auto;
    display: block; /* Bu kritik kural fotografin altindan sarkan 5-10 pixellik hayalet boslugu siler */
    image-rendering: pixelated;
}

#player.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes shake {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(-3deg) scale(0.98); }
    50% { transform: translate(-50%, -50%) rotate(3deg) scale(1.02); }
    75% { transform: translate(-50%, -50%) rotate(-1deg) scale(0.99); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.shaking {
    animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
}

/* Market */
#market {
    position: absolute;
    bottom: 6%;
    left: 4%;
    width: 25%;
    max-width: 300px;
    z-index: 4;
    transition: opacity 1.5s ease;
}

#market > img.market-bg {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

#market-items {
    position: absolute;
    top: calc(50% - 40px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 30px;
    width: 80%;
    height: 50%;
}

#knife-container, #box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
#knife-container { width: 30%; }
#box-container { width: 35%; }

#market-knife {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

#market-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-image: url('cat/Box3.png');
    background-size: 400% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: animateBox 1s step-end infinite;
    transform: translateY(-15%);
}

@keyframes animateBox {
    0% { background-position: 0% 0; }
    25% { background-position: 33.333% 0; }
    50% { background-position: 66.666% 0; }
    75% { background-position: 100% 0; }
}

#market.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Cat Tower */
#cat-tower {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: 37.5%;
    max-width: 375px;
    z-index: 4;
    transition: opacity 1.5s ease;
}

/* Hit Effect styling for clicked location */
.hit-effect {
    position: absolute;
    background-image: url('HitEffect/list.png');
    background-size: 1600% 2000%;
    pointer-events: none; /* Clicks pass through */
    z-index: 100;
    image-rendering: auto; /* Wait, user said pixel art needs pixelated, but hit effects might be smooth? Let's use pixelated just in case. */
    image-rendering: pixelated;
    transform: translate(-50%, -50%);
}

#cat-tower img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

#cat-tower.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Foods */
.falling-food {
    position: absolute;
    width: 64px;
    height: auto;
    z-index: 6;
    image-rendering: pixelated;
    transform: translateX(-50%);
    pointer-events: none;
}

.floating-food {
    animation: floatFood 2s ease-in-out infinite;
}

@keyframes floatFood {
    0% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -15px); }
    100% { transform: translate(-50%, 0); }
}

@keyframes catIdle {
    0% { background-position: 0% 0; }
    10% { background-position: 11.111% 0; }
    20% { background-position: 22.222% 0; }
    30% { background-position: 33.333% 0; }
    40% { background-position: 44.444% 0; }
    50% { background-position: 55.555% 0; }
    60% { background-position: 66.666% 0; }
    70% { background-position: 77.777% 0; }
    80% { background-position: 88.888% 0; }
    90% { background-position: 100% 0; }
}

.spawned-cat {
    position: absolute;
    width: 5vw;
    min-width: 40px;
    aspect-ratio: 1 / 1;
    background-image: url('cat/Idle.png');
    background-size: 1000% 100%;
    background-repeat: no-repeat;
    image-rendering: auto;
    image-rendering: pixelated;
    animation: catIdle 1s step-end infinite;
    z-index: 5;
    pointer-events: none;
}

#tutorial-arrow {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#tutorial-arrow.visible {
    opacity: 1;
}

#tutorial-arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}