[hidden]{ display:none !important; }
#igricaSadrzaj {  position: fixed;  z-index: 9999;  width: 96vw;    height: 93vh;  margin: 3vh 0 0 2vw; overflow:hidden;  padding: 0; }
.zaglavljeIgrica {  cursor: default; justify-content: center; position: relative;  align-items: center;  padding: 0;   width: 100%; height: auto; margin: 0;  display: flex;  cursor: pointer;}
#btnPocetna{ all: unset; cursor: pointer; display: flex;height: 8vh; width: 8vh; border-radius: 10px;  overflow: hidden;}
#timer {position: absolute;  right:0; font-size: 4vh; line-height:1; color: #70A2E1; font-family: 'Nunito', sans-serif; font-weight: 400;}
#progressBar {height: 1vh; margin:3vh 0; background-color: #FDFAF5; border-radius: 10px; overflow: hidden;}
#progressFill {   height:100%;
  background-color:#70A2E1;
  transform-origin:left center;
  transform:scaleX(var(--p,0));  /* 0..1 */
  transition:transform .5s ease;
    
}
.kutijaCelaStranaIgrica { display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  padding: 0;  height: 77vh;  width: 100%;  overflow: hidden; margin: 0; }
#endScreen {  height: 77vh;  width: auto; margin: 0; position: relative;  overflow: hidden;  flex-direction: column;  align-items: center; justify-content: center; }
#sadrzajendScreen { height: auto; width: auto; display: flex;  flex-direction: column;   justify-content: center;    overflow: hidden;  align-items: center; background-color: orange;}
#uspehAnimacija {height: 78vh; width: auto; margin: auto;}
#downloadLink {  height: 76vh;  width: auto;  align-items: center;  justify-content: center;  flex-direction: column; background-color: blue;}
#downloadImage {  height: 100%;   width: auto; margin: auto; }
.image-container { position: relative;  width: 100%;  height: 78vh; overflow: hidden;  display: flex; justify-content: center;align-items: flex-start; }
.img-comp-container { position: relative; width: 68vh; height: 51vh;}
.img-comp-img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;  overflow: hidden;}
.img-comp-img img { width: 100%; height: 100%; object-fit: contain;  position: absolute;  top: 0; left: 0; transition: none !important; }
.img-comp-overlay {  width: 100%;  clip-path: inset(0 50% 0 0); transition: none !important; }
.img-comp-slider {box-sizing: border-box;position: absolute; z-index: 9;width: 4em; height: 4em; background-color: #70A2E1;border-radius: 50%;cursor: ew-resize; border: 1em solid #FFD37D;
transform: translate(0, -50%);top: 50%; left: 50%; user-select: none; touch-action: none;}
.thumbnail-container {bottom: 0;  left:0;    display: flex;   flex-wrap: nowrap;  justify-content: flex-start;  align-items: center;  position: relative;  z-index: 3; padding: 0;  width: 100%; box-sizing: border-box;
height: 18vh; overflow-x: auto;  scroll-behavior: smooth;  scrollbar-width: thin;  scrollbar-color: #3658D3 #f6f0e5;}
.thumbnail-container img { width: auto; height: 11vh;  cursor: pointer; transition: 0.3s; box-sizing: border-box; }
.thumbnail-container img:hover {   transform: scale(1.15); }
.thumbnail-container::-webkit-scrollbar {  width: 0.5em;  height: 1em; }
.thumbnail-container::-webkit-scrollbar-thumb {   background-color: #3658d3; }
.thumbnail-container::-webkit-scrollbar-track {  background-color: transparent;  border-radius: 10px; } 
.jedanRED {  width: 100%;  height:78vh; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; overflow:hidden;}
#gornjaSlika { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;  width: 79vh;  height: 59vh;}
#donjaSlikaRealna {  position: absolute; width: auto; height: 100%; object-fit: cover; }
#maskCanvas { display: block;position: absolute;  width: 100%; height: 100%;  object-fit: cover; touch-action: none;}
#target {      width:100%; height:24vh;   display: flex; font-family: 'Nunito', sans-serif;  flex-wrap: wrap;  justify-content: center;  align-items: center; font-size: 10vh; margin: 0;
 border: 2px dashed #9E9D9C; font-weight: 900; text-align: center; color: #9E9D9C;  line-height:1; }
.letters { margin: 3vh 0 0 0;  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start;  font-family: 'Nunito', sans-serif; width: 100%; height: 51vh; 
 min-height: 51vh;  overflow-y: hidden; }
.letter {  width: calc(100% / 10); height: calc(51vh / 3);  display: flex;  justify-content: center;    align-items: center;      font-size: 10vh;  font-weight: 900;  text-align: center;
 font-family: 'Nunito', sans-serif;  color: #231D1D;  cursor: grab; text-transform:lowercase;}
.dragging { opacity: 0;  transition: opacity 0.2s ease;}
.lettece-letter {  position: fixed;  pointer-events: none;  opacity: 0.8;  z-index: 10000;}
.extra-letter {  margin-left: 0.3em;  opacity: 0;  transition: opacity 0.5s ease;}
#option1, #option2  {  display: flex;   font-family: 'Nunito', sans-serif;  font-weight: 900; width: 17vh;  height: 17vh;   line-height: 17vh;  font-size: 10vh;  color: #707070;  border-radius: 50%;
  cursor: pointer;  background: #FDFAF5;  transition: transform 0.3s, background-color 0.3s; text-align: center; border: none; outline: none; }
#option1:active, #option2:active {background: #FDFAF5; color: #707070; transform: none;  box-shadow: none;}
#option1, #option2 { user-select: none; -webkit-tap-highlight-color: transparent;}

#option1.correct, #option2.correct {  background-color: #70A2E1; color: #F6F0E5;  transform: scale(1.1); }
.slikaIzmedju {    display: flex; overflow: hidden; aspect-ratio: 4/3;  height: 60vh;   align-items: center;  justify-content: center; }
.slikaIzmedju img {  height: 100%;   width: auto;}
#parovi {display: flex;flex-direction: column; align-items: center; font-family: 'Nunito', sans-serif; font-weight: 900; height: 100%; width:100% }
#slikaZivotinje { width: auto; height: 44vh; overflow:hidden;display: flex; justify-content: center;    align-items: center;}
#zivotinjaSLika { width: auto; height: 90%; object-fit: contain;  }
#dropzones {width:100%; display: flex; flex-direction: row; align-items: center; overflow:hidden;  margin: 2.5vh; gap: 2.5vh; justify-content: center;    align-items: center;}
.drop-zone { width: 16vh;  height: 16vh; font-size: 10vh; text-align: center; line-height: 16vh; border:  2px dashed #9E9D9C;  border-radius: 10px; }
.drop-zone.correct { background-color: #70A2E1 !important; color: #F6F0E5 !important;  border:  2px solid #70A2E1; }
.kutijaSlova {  display: flex; overflow:hidden; align-items: center; justify-content: center; gap: 2.5vh; height: 10vh;}
.slovo { display: flex;  height: 100%; aspect-ratio: 1 / 1;font-size: 5vh;  line-height: 10vh; background: #FDFAF5; border:  2px solid #9E9D9C;   color: #707070; 
border-radius: 8px; cursor: grab; user-select: none;     justify-content: center;    align-items: center;   }
.floating-letter { position: fixed; pointer-events: none; opacity: 1; z-index: 10000; font-family: 'Nunito', sans-serif; font-weight: 900;
transition: none;  display: flex;  height: 100%; aspect-ratio: 1 / 1;font-size: 5vh;  line-height: 10vh; background: #FFD37D;  border:  2px solid #FFD37D;  color: #FDFAF5; 
border-radius: 8px; cursor: grab; user-select: none;     justify-content: center;    align-items: center;}
.puzzle { display: flex; flex-direction: column; width: auto; height: 75vh; margin: auto; padding: 0; gap: 0; box-sizing: border-box; overflow: hidden; font-size: 0; line-height: 0; position: relative; }
.piece { display: flex; align-items: stretch; justify-content: stretch; height: 20%; margin: 0; padding: 0; border: none; box-sizing: border-box; font-size: 0; line-height: 0; transform: translateZ(0); position: relative; will-change: transform; touch-action: none; z-index: 1; }
.piece.active-drag { z-index: 10; transition: none; cursor: ns-resize; }
.piece img { display: block; margin: 0; padding: 0; border: none; box-sizing: border-box; width: 100%; height: 100%; object-fit: fill; backface-visibility: hidden; pointer-events: none; user-select: none; }
.drag-active .piece img { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }

@media (max-width: 1000px) {
#igricaSadrzaj  {  width: 94vw;  height: 95vh; margin: 2vh 0 0 3vw;}
#btnPocetna{ height: 5.5vh; width: 5.5vh; }
#timer {font-size: 3vh; }
#progressBar {margin:2vh 0; }
.kutijaCelaStranaIgrica { height: 80vh; }
#endScreen {   height: 80vh;  width: 100%;}
#downloadLink {  height: auto;  width: 100%;  }
#downloadImage {  height: auto;   width: 100%; } 
.image-container { width: 100%; height: 55vh; margin: 0;  align-items: center;  }
.img-comp-container { width: 86%; height: auto; aspect-ratio: 4 / 3;}
.thumbnail-container {  gap: 0.15vh;  height: 13vh;}
.thumbnail-container img {   height: 10vh;  padding: 0.1vh;}
.img-comp-slider { width: 3em; height: 3em;border: 0.7em solid #FFD37D;}
.jedanRED { height:100%; width: 100%; flex-direction: column; }
#gornjaSlika { width: 98%;  height: auto; aspect-ratio: 4 / 3;}
#target { height:12.3vh; font-size: 7vh;}
.letters {margin:2vh 0 0 0;  height: 60vh;  }
.letter {  width: calc(100% / 6); height: calc(60vh / 5);  font-size: 5.5vh;  }
.extra-letter {  margin-left: 0.15em;  }
.slikaIzmedju {    width:90%; height:auto;  aspect-ratio: 4 / 3;  object-fit: contain; }
#option1, #option2  {  width: 12vh;  height: 12vh;   line-height: 10vh;  font-size: 5vh; }
#parovi { height: auto; width:100%;  }
#slikaZivotinje { width: 100%; height: auto; margin: 5vh 0; }
#zivotinjaSLika { width: 90%; aspect-ratio: 4 / 3; margin: auto;}
#dropzones { gap: 2.5vh; }
.kutijaSlova {  width: 100%; height: auto ; gap: 1vh;}
.slovo {  height: auto; width: calc((100% - 3vh)/4); aspect-ratio: 1 / 1; line-height: 100%;}
.puzzle {  height: auto;  width: 100%;  aspect-ratio: 1 / 1.414; }
  }