*{
    padding:0;
    margin:0;
}
body{
    background:url('../slike/ozadje_pravo.png') no-repeat center center;
    background-size:cover;
    background-position:relative;
    height:100vh;
    width:100vw;
    overflow:hidden;
}
#bg{
    background:url("../slike/ananas.png") no-repeat center center;
    background-size:cover; 
    height:900px;
    width:900px;
    position: relative;  /* pomembno za absolutno pozicioniranje otrok */
    margin: 0 auto;       /* centriranje div-a */
}
#gary, #spuzi {
    position: absolute;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#gary {
    width: 20px;
    height: 20px;
    background-image: url("../sprites/gary_prava.gif");
}
#spuzi {
    width: 30px;
    height: 30px;
    background-image: url("../sprites/spuzi_prava.gif");
}

#canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 1200px;
    height: 1000px;
    z-index: -1;
}
#overlay {
    position: fixed;
    top: 410px;
    left: 960px;
    width: 250px;
    height: 250px;
    background-image: url('../sprites/konec.gif');
    background-size: cover;
    background-position: center;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
#overlay.show {
    opacity: 1;
    pointer-events: auto;
}
#gumb {
    position: absolute;  /* pozicija glede na #bg */
    left: 70px;          /* premakni desno */
    top: 660px;          /* premakni navzdol */
    z-index: 100;        /* da je nad ozadjem */
}

#gumb button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(245, 240, 90, 1); /* po želji */
	color:blue;
	opacity:30%;
    border-radius: 5px;       /* po želji */
	border: none;  /* odstrani privzeti rob brskalnika */
    outline: none; /* odstrani modri rob, ki se pokaže ob fokusu */
}
.pika-bg {
  position: absolute;
  top: 520px;    /* natančno na mesto pike – popravljaš glede na svojo sliko/ozadje! */
  left: 70px;  /* natančno na mesto pike */
  width: 18px;  /* velikost ciljne točke (lahko manjša ali večja) */
  height: 18px;
  cursor: pointer;
  z-index: 20;
  background: rgba(255,255,255,0.01); /* neviden, a lažje klikljiv */
}

.credits-bg {
  position: absolute;
  top: 560px;
  left: 90px;
  color: white;
  background: rgba(0,0,0,0.6);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 30;
  display: none;      /* najprej skrit! */
  pointer-events: none;
}

.pika-bg:hover + .credits-bg {
  display: block;
}
        Styles za records toggle */
        .klikni {
            cursor: pointer;
            color: #5865F2;
            font-weight: bold;
            margin-top: 20px;
        }

        .skrito {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .prikazano {
            max-height: 500px;
        }