:root {
    --scene-width: 1825px;
    --scene-height: 6370px;
    --scene-scale: 1.0;
    --app-viewport-height: 100vh;
    /* Fallback until JS syncs the real visual viewport height */
}

@font-face {
    font-family: 'ByteBounce';
    src: url('font/ByteBounce.ttf') format('truetype');
    font-display: swap;
}

/* Preloader styles */
#pixel-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-viewport-height, 100vh);
    min-height: var(--app-viewport-height, 100vh);
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    font-family: 'ByteBounce', monospace;
    color: #fff;
    transition: opacity 0.5s ease;
}

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

#pixel-loading-text {
    font-family: 'ByteBounce', monospace;
    font-size: 48px;
    color: #ffffff;
    text-align: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

#pixel-loading-dots {
    display: inline-block;
    min-width: 30px;
}

#pixel-loading-progress {
    font-family: 'ByteBounce', monospace;
    font-size: 24px;
    color: #888;
    margin-top: 10px;
}

/* Mobile adjustments for preloader */
@media (max-width: 768px) {
    #pixel-loading-text {
        font-size: 32px;
        letter-spacing: 2px;
    }

    #pixel-loading-progress {
        font-size: 18px;
    }
}

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

html {
    /* Prevent iOS text size adjustment */
    -webkit-text-size-adjust: 100%;
    /* Ensure proper height for scrolling */
    height: auto;
    min-height: 100%;
    cursor: default;
}

/* Custom cursors for interactive elements */
a,
button,
.slider-btn,
.nav-link,
.portfolio-link {
    cursor: url('cursor/Hand.png'), pointer;
}

.tv,
#quality-toggle {
    cursor: pointer !important;
}

/* Pixel art rendering */
img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
}

/* Background layer - covers full content height */
#background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: var(--app-viewport-height, 100vh);
    z-index: 0;
    background: url('background/sky.png') no-repeat center top;
    background-size: cover;
}

/* Android 10 specific fixes provided by JS */
.android-10 #background-layer,
.android-10 #scene-scaler {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix mobile background layer issues - PREVENT BOTTOM GAP */
@media (max-width: 768px) {
    #background-layer {
        /* Force GPU acceleration to prevent rendering gaps */
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Ensure it extends to cover any gaps */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* Viewport wrapper */
#viewport-wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 1;
    min-height: var(--app-viewport-height, 100vh);
    height: auto;
}

/* Scene scaler - handles responsive transform */
#scene-scaler {
    position: relative;
    left: 0;
    transform-origin: top left;
    width: var(--scene-width);
    height: var(--scene-height);
    overflow: visible;
    will-change: transform;
    flex: 0 0 auto;
}

/* Main container */
#scene-container {
    position: relative;
    width: var(--scene-width);
    height: var(--scene-height);
    margin: 0 auto;
    overflow: visible;
}

/* Layers */
.layer {
    position: absolute;
    width: var(--scene-width);
    will-change: transform;
}

/* Mobile optimizations for layers - prevent freezing/disappearing */
@media (max-width: 768px) {
    #viewport-wrapper {
        /* Ensure proper stacking on mobile */
        transform: translateZ(0);
    }

    .layer {
        /* GPU acceleration without conflicting with parallax transforms */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

/* Sky background - now just placeholder within scene */
#sky {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--scene-width);
    height: var(--scene-height);
    z-index: 0;
    background: transparent;
}

/* Moon */
#moon {
    position: absolute;
    top: 150px;
    right: 200px;
    width: 509px;
    height: 485px;
    background: url('background/moon.png') no-repeat center;
    background-size: 509px 485px;
    z-index: 1;
}

/* City layers (parallax) */
#city-far {
    z-index: 2;
    height: 2389px;
    background: url('background/city_far.png') no-repeat center top;
    background-size: 100% auto;
    top: 400px;
    /* najdalji - city_far */
}

#city-mid {
    z-index: 3;
    height: 1665px;
    background: url('background/city_mid.png') no-repeat center top;
    background-size: 100% auto;
    top: 350px;
    /* srednji - city_mid */
}

#city-near {
    z-index: 4;
    height: 3300px;
    background: url('background/city_near.png') no-repeat center top;
    background-size: 100% auto;
    top: 250px;
    /* najbliži - podignut za 50px */
}

/* Clouds */
#clouds {
    position: absolute;
    width: 1825px;
    height: 200px;
    top: 200px;
    /* ispod meseca */
    z-index: 5;
    pointer-events: none;
}

.cloud {
    position: absolute;
    background-repeat: no-repeat;
    opacity: 0.8;
    will-change: transform;
}

.cloud1 {
    top: 20px;
    left: 150px;
    /* malo vise levo */
    width: 741px;
    height: 531px;
    background-image: url('background/cloud 1.png');
    background-size: 741px 531px;
}

.cloud2 {
    top: 80px;
    right: 150px;
    /* jos vise desno */
    width: 709px;
    height: 334px;
    background-image: url('background/cloud 2.png');
    background-size: 709px 334px;
}

/* Low quality city adjustments */
body.low-quality #city-far {
    top: 600px !important;
    /* much bigger value */
}

body.low-quality #city-mid {
    top: 750px !important;
    /* even more lower */
}

body.low-quality #city-near {
    top: 450px !important;
    /* much bigger value */
    height: 3050px !important;
    /* 250px shorter than original 3300px */
}

/* Low quality cloud adjustments */
body.low-quality .cloud1 {
    width: 665px;
    /* 5% smaller than 700px */
    height: 293px;
    /* 5% smaller than 308px */
    background-size: 665px 293px;
    top: 110px;
    /* move even more lower */
}

body.low-quality .cloud2 {
    width: 650px;
    /* wider but still smaller than original */
    height: 251px;
    /* 25% smaller than original 334px */
    background-size: 650px 251px;
}

/* Low quality moon adjustments */
body.low-quality #moon {
    width: 295px;
    /* 5% bigger than 281px */
    height: 280px;
    /* 5% bigger than 267px */
    background-size: 295px 280px;
    right: 300px;
    /* move more to the left from original 200px */
    top: 210px;
    /* move another 20px lower */
}

/* Low quality glass adjustments */
body.low-quality #store-glass {
    display: none;
    /* hide glass in low quality mode since it's now part of storefront */
}

/* Low quality curtain adjustments */
body.low-quality #store-curtain {
    transform: translateY(-50px);
    /* move 50px up */
}





/* Building */
#building {
    position: absolute;
    width: 1776px;
    height: 4339px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 396px;
    z-index: 6;
    background: url('building/building.png') no-repeat center top;
    background-size: 1776px 4339px;
}

/* Windows */
.window {
    position: absolute;
    width: 326px;
    height: 624px;
    z-index: 7;
    transition: filter 0.3s ease;
    background-size: 326px 624px;
    background-repeat: no-repeat;
}

.window:hover {
    filter: brightness(1.1);
}

/* Fire escapes */
#fire-escapes {
    position: absolute;
    width: 1776px;
    height: 4339px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 396px;
    z-index: 8;
    pointer-events: none;
}

/* Store layers - pravilno organizovani po layerima */
.store-layer {
    position: absolute;
    pointer-events: none;
    /* omogućava click/hover through */
    background-size: contain;
    background-repeat: no-repeat;
}

/* Layer 1 - Curtain (najdalji) */
#store-curtain {
    z-index: 10;
    pointer-events: none;
    /* click/hover through */
}

/* Layer 2 - Background stuff */
#store-background-stuff {
    z-index: 11;
    pointer-events: none;
    /* click/hover through */
}

/* Layer 3 - Items (Audio Recorder, OPEN sign, Radio) */
.store-item-layer3 {
    z-index: 12;
    pointer-events: none;
    /* click/hover through */
}

/* Layer 4 - TVs */
.tv {
    position: absolute;
    cursor: url('cursor/Hand.png'), pointer;
    transition: transform 0.2s ease;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 13;
    pointer-events: auto;
    /* TVs MORAJU biti klikabilni */
    touch-action: manipulation;
    /* Optimize for touch */
}

.tv:hover {
    transform: scale(1.05);
}

/* Layer 5 - CASH ONLY sign */
#store-cash-only {
    z-index: 14;
    pointer-events: none;
    /* click/hover through */
}

/* Layer 6 - Glass */
#store-glass {
    z-index: 15;
    pointer-events: none;
    /* click/hover through */
}

/* Layer 7 - Storefront (najbliži) */
#storefront {
    position: absolute;
    width: 1672px;
    /* ISPRAVLJENA DIMENZIJA */
    height: 1109px;
    /* ISPRAVLJENA DIMENZIJA */
    left: 50%;
    transform: translateX(-50%);
    bottom: 396px;
    z-index: 16;
    background: url('Store/storefront.png') no-repeat center top;
    background-size: 1672px 1109px;
    /* ISPRAVLJENA DIMENZIJA */
    pointer-events: none;
    /* click/hover through */
}

/* Awning */
#awning {
    position: absolute;
    width: 100%;
    height: 371px;
    left: 0;
    z-index: 17;
    background: url('Store/awning.png') no-repeat center top;
    background-size: 100% 371px;
    visibility: hidden;
    /* Hide awning during initial load to prevent flash */
}

/* Show awning after scene is initialized */
#awning.initialized {
    visibility: visible;
}

/* Street */
#street {
    position: absolute;
    width: 100%;
    height: 396px;
    left: 0;
    bottom: 0;
    z-index: 18;
    background: url('Street/street.png') no-repeat center top;
    background-size: 100% auto;
}

/* Manhole animation */
#manhole {
    position: absolute;
    width: 200px;
    height: 194px;
    left: 50%;
    bottom: 180px;
    transform: translateX(-50%);
    z-index: 19;
    background-size: 200px 194px;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Lamp posts */
#lamp-posts {
    display: block !important;
    overflow: hidden;
    /* sakri sve što izlazi van */
}

.lamp-post {
    position: absolute;
    width: 544px;
    height: 1352px;
    z-index: 19;
    background-size: 544px 1352px;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    pointer-events: none;
    /* clickable through */
}

.lamp-post.always-on {
    background-image: url('Props/lamp_post_on.png');
    filter: drop-shadow(0 0 30px rgba(255, 200, 100, 0.4));
}

.lamp-post.flickering {
    background-image: url('Props/lamp_post_off.png');
}

.lamp-post.flickering.on {
    background-image: url('Props/lamp_post_on.png');
    filter: drop-shadow(0 0 30px rgba(255, 200, 100, 0.4));
    transition: none;
    /* bez smooth tranzicije */
}

/* Quality Toggle Button */
#quality-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 40px;
    background-image: url('buttons/Button.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: url('cursor/Hand.png'), pointer;
    z-index: 1000;
    transition: transform 0.2s ease;
    touch-action: manipulation;
    /* Optimize for touch */
}

#quality-toggle:hover {
    transform: scale(1.1);
}

/* Ensure minimum touch target size on mobile */
@media (pointer: coarse) {
    #quality-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}