html, body { 
    width: 100vw; height: 100vh; 
    margin: 0; padding: 0; 
    overflow: hidden; 
    background-color: #000; 
    touch-action: none; 
    user-select: none; 
    -webkit-user-select: none; 
}

#stage { 
    height: 720px; 
    background-color: #1a2226; 
    position: absolute; left: 0; 
    transform-origin: top left; 
    overflow: hidden; 
}

#rotate-screen {
    display: none; position: fixed; inset: 0; background: #000; z-index: 10000;
    color: white; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; font-family: 'Arial Black', sans-serif;
}

@media screen and (orientation: portrait) and (max-width: 900px) {
    #rotate-screen { display: flex; }
    #stage { display: none !important; }
}

#oblaci { width: 100%; height: 147px; background: url('oblaci.png') repeat-x; position: absolute; top: 100px; z-index: 5; }

#top-bar { 
    position: absolute; 
    top: 10px; 
    width: 100%; 
    height: 65px;
    z-index: 2000; 
}


.ui-group { 
    display: flex; 
    flex-direction: row; 
    gap: 6px; 
}

.ui-left {
    position: absolute;
    left: 15px;
    top: 0;
}

.ui-right {
    position: absolute;
    right: 15px;
    top: 0;
}

.frame-container { position: relative; width: 113px; height: 43px; }

.total-score-frame { 
    position: absolute !important; 
    left: 50% !important; 
    top: -5px !important; 
    transform: translateX(-50%) !important; 
    width: 300px !important; 
    height: 60px !important; 
    margin-left: -50px !important; 
}

.total-score-frame .frame-text {
    top: 48% !important;
    left: auto !important; 
    right: 20px !important; 
    transform: translateY(-50%) !important;
    text-align: right !important; 
    font-size: 26px !important; 
}

.frame-img { 
    position: absolute; inset: 0; width: 100%; height: 100%; 
    object-fit: fill; 
}

.frame-text {
    position: absolute; 
    font-weight: 900; 
    font-family: 'Arial Black', sans-serif; 
    color: #ffffff; 
    text-shadow: 2px 2px 0px #222, -2px -2px 0px #222, 2px -2px 0px #222, -2px 2px 0px #222, 0px 2px 0px #222, 2px 0px 0px #222, 0px -2px 0px #222;
    z-index: 10; 
    white-space: nowrap;
    top: 50%; 
    transform: translateY(-50%);
    font-size: 14px; 
}

.ui-left .frame-text { 
    left: 42px; 
    width: 65px; 
    text-align: center; 
}

.ui-right .frame-text, .frame-hp .frame-text { 
    left: 5px; 
    width: 65px; 
    text-align: center; 
}

#top-right-controls { 
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    z-index: 3000; 
}

.tr-btn { width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; border: none; cursor: pointer; transition: transform 0.1s; -webkit-tap-highlight-color: transparent; }
.tr-btn:active { transform: scale(0.9); }

#btn-sound { background-image: url('tipka_zvuk.png'); }
#btn-play { background-image: url('tipka_igraj.png'); }
#btn-pause { background-image: url('tipka_pauza.png'); }
#btn-stop { background-image: url('tipka_stop.png'); }

#igrac, .plat, .metak, .bomba, .neprijatelj, .item, .skrinja, .kasica { will-change: transform, left, top; }
#igrac { background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; z-index: 650; }

@keyframes shieldGlow { 0% { filter: drop-shadow(0 0 5px gold) brightness(1); } 50% { filter: drop-shadow(0 0 25px yellow) brightness(1.3) hue-rotate(30deg); } 100% { filter: drop-shadow(0 0 5px gold) brightness(1); } }
.shield-active { animation: shieldGlow 0.4s infinite alternate !important; }

.plat { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: top center; z-index: 100; }
.metak { width: 40px; height: 25px; background: url('novcanica.png') no-repeat center/contain; position: absolute; z-index: 450; }
.bomba { width: 20px; height: 16px; background: url('bomba.png') no-repeat center/contain; position: absolute; z-index: 450; }
.item { position: absolute; z-index: 450; background-size: contain; background-repeat: no-repeat; background-position: center bottom; }

.anim-zvijezda { animation: starShine 2s infinite alternate; }
@keyframes starShine { 0% { filter: drop-shadow(0 0 2px rgba(255, 255, 0, 0.5)); transform: scale(1); } 100% { filter: drop-shadow(0 0 6px rgba(255, 255, 0, 1)); transform: scale(1.05); } }
.anim-dijamant { animation: diamondSparkle 2s infinite alternate; }
@keyframes diamondSparkle { 0% { filter: brightness(1) drop-shadow(0 0 2px rgba(0, 255, 255, 0.5)); } 100% { filter: brightness(1.3) drop-shadow(0 0 8px rgba(0, 255, 255, 0.8)); } }
.anim-novcic { animation: coinGleam 2s infinite alternate; }
@keyframes coinGleam { 0% { filter: brightness(1) drop-shadow(0 0 1px gold); } 100% { filter: brightness(1.2) drop-shadow(0 0 5px gold); } }
.anim-napitak { animation: potionGlow 1.5s infinite alternate; }
@keyframes potionGlow { 0% { filter: brightness(1) drop-shadow(0 0 2px rgba(100, 255, 100, 0.5)); transform: scale(1) rotate(-3deg); } 100% { filter: brightness(1.2) drop-shadow(0 0 7px rgba(100, 255, 100, 0.8)); transform: scale(1.05) rotate(3deg); } }

.neprijatelj { width: 105px; height: 120px; background-size: contain; background-repeat: no-repeat; position: absolute; z-index: 400; background-position: bottom center; }
.kasica { width: 100px; height: 100px; background-size: contain; background-repeat: no-repeat; position: absolute; z-index: 500; background-position: bottom center; animation: kasicaDise 1.5s infinite ease-in-out; }
@keyframes kasicaDise { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.skrinja { width: 150px; height: 150px; background: url('skrinja_zlatna_zatvorena.png') no-repeat bottom center/contain; position: absolute; z-index: 600; }
.prasina { width: 60px; height: 60px; background: url('prasina.png') no-repeat center/contain; position: absolute; z-index: 640; pointer-events: none; }

#mobile-controls { position: absolute; bottom: 90px; width: 100%; display: none; justify-content: space-between; padding: 0 40px; box-sizing: border-box; z-index: 9999; pointer-events: none; }
.m-group { display: flex; gap: 25px; pointer-events: auto; }
.m-btn { width: 105px; height: 105px; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0; background-size: contain; background-repeat: no-repeat; background-position: center; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; filter: drop-shadow(2px 4px 5px rgba(0,0,0,0.5)); }
#m-left { background-image: url('tipka_lijevo.png'); transform: none !important; }
#m-right { background-image: url('tipka_desno.png'); transform: none !important; }
#m-jump { background-image: url('tipka_skok.png'); transform: none !important; }
#m-shoot { background-image: url('tipka_X.png'); transform: none !important; }
.m-btn:active { transform: scale(0.9) !important; }
#m-left:active, #m-right:active, #m-jump:active, #m-shoot:active { transform: scale(0.9) !important; }

@keyframes itemCollect { 0% { transform: scale(1) translateY(0); opacity: 1; } 50% { transform: scale(1.4) translateY(-20px); opacity: 1; } 100% { transform: scale(0.1) translateY(-40px); opacity: 0; } }
.item-sakupljen { animation: itemCollect 0.6s ease-out forwards; pointer-events: none; }
@keyframes kasicaPuc { 0% { transform: scale(1) translateY(0); opacity: 1; background-image: url('kasica_roza.png'); } 50% { transform: scale(1.3) translateY(-30px); opacity: 1; background-image: url('kasica_roza.png'); } 100% { transform: scale(0.5) translateY(-50px); opacity: 0; background-image: url('kasica_roza.png'); } }
.kasica-pukla { animation: kasicaPuc 0.8s ease-out forwards !important; pointer-events: none; }

.plus-pet { position: absolute; color: #f1c40f; font-weight: 900; font-size: 30px; font-family: 'Arial Black', sans-serif; text-shadow: 2px 2px 0px #000; z-index: 1000; pointer-events: none; animation: plusPetAnim 1s ease-out forwards; }
@keyframes plusPetAnim { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }

#overlay { position: absolute; inset: 0; background: #000; display: flex; justify-content: center; align-items: center; z-index: 5000; cursor: pointer; }
#start-menu-img { width: 500px; height: 500px; object-fit: contain; max-width: 100vw; }
#pause-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 5000; color: white; font-family: 'Arial Black', sans-serif; text-align: center; cursor: pointer; }
#exit-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9000; justify-content: center; align-items: center; }
.modal-box { background: #2e7d32; border: 6px solid #f1c40f; border-radius: 20px; padding: 40px; text-align: center; color: white; font-family: 'Arial Black', sans-serif; max-width: 500px; }
.modal-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 30px; }
.modal-btn { padding: 15px 30px; font-size: 24px; font-weight: 900; border: 4px solid #f1c40f; border-radius: 15px; cursor: pointer; transition: transform 0.1s; }
.modal-btn:active { transform: scale(0.9); }
.modal-btn-yes { background: #c62828; color: #f1c40f; }
.modal-btn-no { background: #9bd34c; color: black; }

#game-over-overlay { position: fixed; inset: 0; background-color: black; z-index: 6000; display: none; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; }
.go-img { width: 500px; height: 521px; object-fit: contain; max-width: 100vw; }
#restart-area { position: absolute; width: 400px; height: 400px; background: transparent; z-index: 6100; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse) { #mobile-controls { display: flex !important; } }
@media (pointer: fine) { #mobile-controls { display: none !important; } }

.lokot-boss {
    position: absolute;
    width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 350;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.6));
}

.banka-zgrada {
    position: absolute;
    width: 290px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 300;
}