/* Experimental: keep links clickable but invisible */
a.gr-invisible-click {
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
}
a.gr-invisible-click::before,
a.gr-invisible-click::after {
  opacity: 0 !important;
}
.pzl-marker{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 899999990060;
}
.pzl-marker .pzl-dot{
    width: 25px; height: 25px; border-radius: 100%; background: skyblue;
}
.pzl-marker.pzl-unavailable{ filter: grayscale(100%); opacity: 0.6; }

/* Force-show anchors while puzzle-on without affecting routing */
body.puzzle-on .container a.pzl-show{
    display: block !important;
}
body.puzzle-on .container a.pzl-show:after{
    display: block !important;
}
body.puzzle-on .container a.pzl-show.pzl-unavailable:after{
    filter: grayscale(100%); opacity: 0.6;
}
/* Hide real anchors that have been collected while puzzle is ON */
body.puzzle-on .container a.pzl-hide{
    display: none !important;
}
:root {
    --bug-animation-duration: 30s;
    --onyx: #303638ff;
    --jonquil: #f0c808ff;
    --field-drab: #5d4b20ff;
    --viridian: #469374ff;
    --purpureus: #9341b3ff;
    --french-rose: #e3427dff;
    --persian-orange: #e68653ff;
    --vanilla: #ebe0b0ff;
    --cream: #edfbbaff;
}



.preload-img{
    visibility: hidden !important;
}


body{ 
    margin: 0 !important;
    background-color: #3e3c3c;
}

.prvipravi2-img{
    
     position: absolute !important;

     z-index: 80003;
}


.zaklon{
   
    z-index: 99999999999911999999;
}

.container .m{
    display: none;
    z-index: 80003;
    
}

.blocker{
    background-color: transparent !important;
}




.lok0{
     display: block;
 background-color: #eb4034;      
    border-radius: 100%;
        height: 5%; 
        top: 49%;
        left: 12%;
        width: 5%;
    z-index: 79999;
    }
    .lok0{
        display: block;
    background-color: #eb4034;      
       border-radius: 100%;
           height: 5%;
           top: 49%;
           left: 12%;
           width: 5%;
       z-index: 79999;
       }

.lok1 {
    display: block;
    background-color: aqua;
    border-radius: 100%;
    height: 7%;
    top: 71%;
    left: 70%;
    width: 7%;
    z-index: 79999;
}
.lok2{
     display: block;
 background-color: #d13e0c;      
    border-radius: 100%;
        height: 7%;
        top: 13%;
        left: 26%;
        width: 7%;
    z-index: 79999;
    }
.lok3{
     display: block;
 background-color: #d13e0c;    
    border-radius: 100%;
        height: 7%;
        top: 58%;
        left: 82%;
        width: 7%;
        z-index: 79999;
    }
.lok4{
     display: block;
 background-color: #d13e0c;    
    border-radius: 100%;
        height: 7%;
        top: 59%;
        left: 44%;
        width: 7%;
        z-index: 79999;
    }

.lok5{
     display: block;
 background-color: #d13e0c;     
    border-radius: 100%;
        height: 7%;
        top: 43%;
        left: 76%;
        width: 10%;
        z-index: 79999;
    }
.lok6{
     display: block;
 background-color: #d13e0c;      
    border-radius: 100%;
        height: 10%;
        top: 5%;
        left: 69%;
        width: 10%;
        z-index: 79999;
    }
.lok7{
     display: block;
 background-color: #d13e0c;      
    border-radius: 110%;
        height: 7%;
        top: 69%;
        left: 87%;
        width: 7px;
        z-index: 79999;
    }




/* New moth location containers - clean movement range determinants */
.moth-lok0{
    display: block;
    background-color: rgba(235, 64, 52, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
   
    width: 1vw;
    z-index: 79998;
}

.moth-lok1 {
    display: block;
    background-color: rgba(0, 255, 255, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
  
    width: 1vw;
    z-index: 79998;
}

.moth-lok2{
  /*  display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 13%;
    left: 26%;
    width: 1vw;
    z-index: 79998;*/
}
.moth-lok7{
    /*  display: block;
      background-color: rgba(209, 62, 12, 0);
      position: absolute;
      border-radius: 0;
      height: 1vw;
      top: 13%;
      left: 26%;
      width: 1vw;
      z-index: 79998;*/
  }
  .moth-lok81{
    /*  display: block;
      background-color: rgba(209, 62, 12, 0);
      position: absolute;
      border-radius: 0;
      height: 1vw;
      top: 13%;
      left: 26%;
      width: 1vw;
      z-index: 79998;*/
  }
  .moth-lok82{
      /*  display: block;
        background-color: rgba(209, 62, 12, 0);
        position: absolute;
        border-radius: 0;
        height: 1vw;
        top: 13%;
        left: 26%;
        width: 1vw;
        z-index: 79998;*/
    }
.moth-lok3{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
 
    width: 1vw;
    z-index: 79998;
}

.moth-lok4{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    
    width: 1vw;
    z-index: 79998;
}

.moth-lok5{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    
    width: 1vw;
    z-index: 79998;
}

.moth-lok6{
    display: block;
    background-color: rgba(209, 61, 12, 0.041);
    position: absolute;
    border-radius: 0;
    height: 1vw;
   
    width: 1vw;
    z-index: 79998;
}



[data-role="bug"]{
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80004;
}

/* Make the bug triangle 5% bigger */
[data-role="bug"].shown-bug {
    width: 0;
    height: 0;
    border-left: min(calc(1vw * 1.26), 8.32px) solid transparent;
    border-right: min(calc(1vw * 1.26), 8.32px) solid transparent;
    border-bottom: min(calc(1.6vw * 1.26), 15.12px) solid #323232;
    position: absolute;
    transform-origin: center center;
    z-index: 80006;
}

/* Exit phase: keep visible but non-interactive and slightly dim to signal leaving */
[data-role="bug"].shown-bug.leaving {
    pointer-events: none;
    opacity: 0.85;
}

/* Particle-line burst at the end of the animation for a faster, hectic exit */
[data-role="bug"].shown-bug::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
    /* multiple particles via box-shadow; starts centered (0,0) then scatters */
    box-shadow:
      0 0 #f5f5f5,
      0 0 #f5f5f5,
      0 0 #f5f5f5,
      0 0 #f5f5f5,
      0 0 #f5f5f5,
      0 0 #f5f5f5,
      0 0 #f5f5f5,
      0 0 #f5f5f5;
    opacity: 0;
    animation: bugParticleBurst var(--bug-animation-duration) linear forwards;
    pointer-events: none;
}

@keyframes bugParticleBurst {
    0%, 93% { opacity: 0; transform: translate(0,0) scale(1); }
    /* appear quickly near the end */
    94% { opacity: 0.2; }
    95% {
        opacity: 0.8;
        /* still near center */
        box-shadow:
          0px 0px #f5f5f5,
          0px 0px #f5f5f5,
          0px 0px #f5f5f5,
          0px 0px #f5f5f5,
          0px 0px #f5f5f5,
          0px 0px #f5f5f5,
          0px 0px #f5f5f5,
          0px 0px #f5f5f5;
    }
    97% {
        opacity: 0.6;
        /* fast scatter in a hectic star/line pattern */
        box-shadow:
          -6px -2px #f5f5f5,
          4px -5px #f5f5f5,
          8px 3px #f5f5f5,
          -10px 1px #f5f5f5,
          12px -8px #f5f5f5,
          -14px 6px #f5f5f5,
          16px 10px #f5f5f5,
          -18px -12px #f5f5f5;
        filter: blur(0.3px);
    }
    98.5% {
        opacity: 0.35;
        box-shadow:
          -18px -6px #f5f5f5,
          14px -11px #f5f5f5,
          22px 9px #f5f5f5,
          -26px 4px #f5f5f5,
          30px -18px #f5f5f5,
          -34px 16px #f5f5f5,
          38px 24px #f5f5f5,
          -42px -28px #f5f5f5;
        filter: blur(0.6px);
    }
    100% {
        opacity: 0;
        /* final wide scatter */
        box-shadow:
          -36px -12px #f5f5f5,
          28px -22px #f5f5f5,
          44px 18px #f5f5f5,
          -52px 8px #f5f5f5,
          60px -36px #f5f5f5,
          -68px 32px #f5f5f5,
          76px 48px #f5f5f5,
          -84px -56px #f5f5f5;
        transform: translate(6px, -8px) scale(1.05);
        filter: blur(1px);
    }
}

/* Position each bug at its specific location */
[data-role="bug"].shown-bug.lok0{
    top: 34%;
    left: 12%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}

[data-role="bug"].shown-bug.lok1{
    top: 72%;
    left: 68%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}
[data-role="bug"].shown-bug.lok7{
    top: 57%;
    left: 78%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
    z-index: 80006;
}

/* horizont*/
[data-role="bug"].shown-bug.lok81{
    top: 5%;
    left: 31%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}
/* vertical */
[data-role="bug"].shown-bug.lok82{
    top: 3%;
    left: 31%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}





[data-role="bug"].shown-bug.lok2{
    top: 15%;
    left: 31%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}

[data-role="bug"].shown-bug.lok3{
    top: 53%;
    left: 89%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}

[data-role="bug"].shown-bug.lok4{
    top: 58%;
    left: 47%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}

[data-role="bug"].shown-bug.lok5{
    top: 43%;
    left: 75%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}

[data-role="bug"].shown-bug.lok6{
    top: 2%;
    left: 70%;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}

/* Immediate fly-off animation override when leaving/flyoff-now is set */
[data-role="bug"].shown-bug.flyoff-now {
    /* Override any location animation with a short fly-off */
    animation: bugImmediateFlyoff 0.8s linear forwards !important;
    opacity: 1 !important;
}

@keyframes bugImmediateFlyoff {
    0% { opacity: 0.95; transform: scale(1.05) rotate(350deg) translate(0px, 0px); }
    20% { opacity: 0.9; transform: scale(1.05) rotate(360deg) scaleX(0.4) translate(12px, -8px); }
    40% { opacity: 0; transform: scale(1.07) rotate(375deg) translate(24px, -4px); }
    70% { opacity: 0.3; transform: scale(1.1) rotate(390deg) scaleX(0.35) translate(40px, -18px); }
    100% { opacity: 0; transform: scale(1.1) rotate(450deg) scaleX(0.3) translate(132px, -70px); }
}

/* Create a single unified bug animation */
@keyframes unifiedBugAnim {
    /* Initial state - fade in */
    0% { opacity: 0.; transform: scale(0.8) rotate(0deg) scaleX(1) translate(0, 0); }
    0.5% { opacity: 0.5; transform: scale(0.9) rotate(3deg) scaleX(1) translate(0, 0); }
    1% { opacity: 0.8; transform: scale(1) rotate(5deg) scaleX(1) translate(0, 0); }
    1.5% { opacity: 1; transform: scale(1.1) rotate(8deg) scaleX(1) translate(0, 0); }
    /* Quick arrival */
    2% { opacity: 1; transform: scale(0.9) rotate(10deg) scaleX(1) translate(0, 0); }
    2.5% { opacity: 1; transform: scale(0.95) rotate(15deg) scaleX(0.5) translate(0, 0); }
    3% { opacity: 1; transform: scale(1) rotate(20deg) scaleX(1) translate(0, 0); }
    
    /* Main hovering phase with more wing flaps and full 360° progression */
    20% { opacity: 0.9; transform: scale(1) rotate(90deg) scaleX(1) translate(0, 0); }
    20.2% { opacity: 1; transform: scale(1) rotate(92deg) scaleX(0.45) translate(0, 0); }
    20.4% { opacity: 1; transform: scale(1) rotate(94deg) scaleX(1) translate(0, 0); }
    
    40% { opacity: 1; transform: scale(1.05) rotate(180deg) scaleX(1) translate(0, 0); }
    40.2% { opacity: 1; transform: scale(1.05) rotate(182deg) scaleX(0.45) translate(0, 0); }
    40.4% { opacity: 1; transform: scale(1.05) rotate(184deg) scaleX(1) translate(0, 0); }
    
    60% { opacity: 1; transform: scale(1) rotate(270deg) scaleX(1) translate(0, 0); }
    60.2% { opacity: 1; transform: scale(1) rotate(272deg) scaleX(0.45) translate(0, 0); }
    60.4% { opacity: 1; transform: scale(1) rotate(274deg) scaleX(1) translate(0, 0); }
    
    80% { opacity: 1; transform: scale(1.05) rotate(330deg) scaleX(1) translate(0, 0); }
    80.2% { opacity: 1; transform: scale(1.05) rotate(332deg) scaleX(0.45) translate(0, 0); }
    80.4% { opacity: 1; transform: scale(1.05) rotate(334deg) scaleX(1) translate(0, 0); }
    
    /* Pre-departure settle */
    87% { opacity: 1; transform: scale(1) rotate(340deg) scaleX(1) translate(0, 0); }
    
    /* Spiral fly-off with rapid flaps and fade-out */
    89% { opacity: 0.95; transform: scale(1.05) rotate(350deg) scaleX(1) translate(0px, 0px); }
    90% { opacity: 0.9; transform: scale(1.05) rotate(360deg) scaleX(0.4) translate(12px, -8px); }
    91% { opacity: 0; transform: scale(0.5) rotate(375deg) scaleX(1) translate(24px, -4px); }
    92% { opacity: 0.3; transform: scale(1.1) rotate(390deg) scaleX(0.35) translate(40px, -18px); }
    93% { opacity: 0; transform: scale(0.12) rotate(405deg) scaleX(1) translate(58px, -30px); }
    94% { opacity: 0.1; transform: scale(1.15) rotate(420deg) scaleX(0.35) translate(80px, -42px); }
    95% { opacity: 0; transform: scale(0.18) rotate(435deg) scaleX(1) translate(105px, -55px); }
    100% { opacity: 0; transform: scale(0) rotate(450deg) scaleX(0.3) translate(132px, -70px); }
}

/* Optional: sprite-based fly-off (apply class .bug-flyoff-sprite to use) */
[data-role="bug"].bug-flyoff-sprite {
    width: 32px;
    height: 32px;
    border: none;
    background-image: url('images/bug-sprite.png'); /* supply your sprite sheet */
    background-repeat: no-repeat;
    animation: bugFlyoffSprite 0.8s steps(8) forwards, unifiedBugAnim var(--bug-animation-duration) forwards;
}

@keyframes bugFlyoffSprite {
    from { background-position: 0 0; }
    to { background-position: -256px 0; } /* 8 frames * 32px each */
}

@keyframes bugAnim {
    0% { opacity: 0; transform: scale(0.8) rotate(0deg); }
    10% { opacity: 1; transform: scale(1) rotate(45deg); }
    50% { opacity: 0.8; transform: scale(1.1) rotate(180deg); }
    90% { opacity: 1; transform: scale(1) rotate(315deg); }
    100% { opacity: 0; transform: scale(0.8) rotate(360deg); }
}



.ruke-animation {
    position: absolute;
    z-index: 99999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
    mix-blend-mode: multiply;
    object-fit: contain;
}





.container .m0{
     display: none;
    background-color: rgba(252, 186, 3, 0);
        border-radius: 100%;
        height: 19%;
        top: 27%;
        left: 4%;
        width: 19%;
    z-index: 80006;
    }
    .container .m0b{
        display: none;
       background-color: rgba(32, 252, 3, 0);
           border-radius: 100%;
           height: 19%;
           top: 30%;
           left: 15%;
           width: 19%;
       z-index: 80006;
       }

.container .m1 {
     display: none;
    background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 60%;
        left: 51%;
        width: 19%;
    z-index: 80006;
    }
.container .m2{
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
        top: 5%;
        left: 24%;
        width: 19%;
    z-index: 80006;
    }
.container .m3{
     display: none;
     background-color: rgba(41, 84, 59, 0);
        border-radius: 100%;
        height: 19%;
        top: 46%;
        left: 75%;
        width: 19%;
        z-index: 80006;
    }


.container .m4{
     display: none;
     background-color: rgba(69, 137, 196, .0);
        border-radius: 100%;
        height: 19%;
        top: 45%;
        left: 33%;
        width: 19%;
        z-index: 80006;
    }

.container .m5{
     display: none;
     background-color: rgba(120, 118, 140, .0);
        border-radius: 100%;
        height: 19%;
        top: 36%;
        left: 63%;
        width: 19%;
        z-index: 80006;
    }


.container .m6{
     display: none;
     background-color: rgba(10, 15, 26, 0); 
        border-radius: 100%;
        height: 17%;
        top: 1%;
        left: 65%;
        width: 19%;
        z-index: 80006;
    }
.container .m7{
     display: none;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 61%;
        left: 68%;
        width: 19%;
        z-index: 80006;
    }



.container .wikiread{
     display: none;
     background-color: rgba(19, 19, 76, 0);
        border-radius: 100%;
        height: 15%;
        top: 38%;
        left: 63%;
        width: 15%;
        z-index: 80006;
    }



.uputecursor
{
    position: absolute;
  display: inline-block;
     visibility: visible;
     background-color: rgba(19, 19, 76, .0);
        
        height: 67%;
        top: 55%;
        left: 35%;
        width: 68%;
        z-index: 80003;
 }

.keyholdlinkbutton {
  display: block;
     visibility: visible;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 38%;
        left: 63%;
        width: 15%;
        z-index: 899999990004;
 }
 .keyholdlinkbuttondiv{
  display: none;
     visibility: hidden;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 58%;
        left: 63%;
        width: 15%;
        z-index: 899999990004;
}
.togllebutton{
  display: none;
         visibility: hidden;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 28%;
        left: 63%;
        width: 15%;
        z-index: 899999990004;
 }



 .container .keyholdlink{
    border-radius: 0;
    color: red;
        z-index: 7999999;
  }











 .container .t0m0{
        top: 35%;
        left: 23%;
    display: none;
     background-color: rgba(72, 134, 111, 0);
        border-radius: 100%;
        height: 21%;
  width: 21%;
        z-index: 7999999;
 }

 .container .t0m0b{
    top: 35%;
    left: 23%;
display: none;
 background-color: rgba(72, 134, 111, 0);
    border-radius: 100%;
    height: 21%;
width: 21%;
    z-index: 7999999;
}

.vidljivo{
        top: 22%;
        left: 69%;
    display: block;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 799999999999999;
    visibility: visible;
 }



 .container .t0m3{
        top: 22%;
        left: 62%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container .t0bm0{
        top: 10%;
        left: 40%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }
 .container .t0bm1{
    top: 70%;
    left: 40%;
display: none;
 background-color: rgba(59, 112, 93, .0);
    border-radius: 100%;
    height: 19%;
width: 19%;
    z-index: 7999999;
}
 .container .t0bm3{
        top: 22%;
        left: 41%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container  .t1m2{
        top: 27%;
        left: 23%;
      
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t1m7{
 top: 68%;
 left: 69%;
  display: none;
     background-color: rgba(59, 112, 93, 0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2m3{
        top: 15%;
        left: 24%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2m0{
        top: 11%;
        left: 55%;
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2bm3{
        top: 37%;
        left: 24%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2bm0{
        top: 37%;
        left: 54%;
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t3m1{
        top: 45%;
        left: 2%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }




 .container  .t3m4{
        top: 17%;
        left: 2%;
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container .t4m5{
        top: 1%;
        left: 80%;
   display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%; 
        z-index: 7999999;
 }

 .container .t4m5b{
        top: 1%;
        left: 80%;
   display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }
 .container .t4bm5{
    top: 1%;
    left: 80%;
display: none;
 background-color: rgba(59, 112, 93, .0);
    border-radius: 100%;
    height: 19%;
width: 19%;
    z-index: 7999999;
}

.container .t4m7{
          top: 19%;
    left: 80%;

 display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }

 .container .t4bm7{
    top: 19%;
left: 80%;

display: none;
background-color: rgba(59, 112, 93, .0);
  border-radius: 100%;
  height: 19%;
width: 19%;
  z-index: 7999999;
}

 .container  .t5m0{
        top: 30%;
        left: 26%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }
 .container  .t5m0b{
    top: 30%;
    left: 26%;
display: none;
 background-color: rgba(59, 112, 93, .0);
    border-radius: 100%;
    height: 19%;
width: 19%;
    z-index: 7999999;
}



 .container  .t5m6{
        top: -7%;
        left: 80%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container  .t6m0{
        top: 30%;
        left: 83%;
   display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        width: 4%;
        z-index: 7999999;
 }




 .container  .t6m4{
        top: 18%;
        left: 43%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }
 .container  .t6bm4{
        top: 18%;
        left: 43%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }
 

 .container  .t62m4{
    top: 20%;
   left: 17%;
display: none;
background-color: rgba(59, 112, 93, .0);
   border-radius: 100%;
   height: 19%;
width: 19%;
   z-index: 7999999;
}

 .container  .t62m0{
          top: 11.5%;
        left: 40.2%;
 display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }

 .container  .t7m5{
    top: 36.5%;
  left: 5.2%;
display: none;
background-color: rgba(59, 112, 93, .0);
  border-radius: 100%;
  height: 19%;
width: 19%;
  z-index: 7999999;
}



.container .d11{
     display: block;
     background-color: rgba(38, 39, 40, 0);
        border-radius: 100%;
        height: 13%;
        top: 29%;
        left: 43%;
        width: 15%;
        z-index: 80005;
    }

.container .d12{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 82%;
        top: 69%;
        left: 48%;
        width: 19%;
        z-index: 80004;
    }

.container .d13{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 82%;
        top: -66%;
        left: 1%;
        width: 100%;
        z-index: 80004;
    }

.container .d10{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 69%;
        left: 82%;
        width: 19%;
        z-index: 80004;
    }

      .container .c{
           display: block !important;
           background-color: rgba(10, 15, 26, .10);
        border-radius: 100%;
        height: 2%;
        top: 83%;
        left:13%;
        width: 2%;
          z-index: 100000;
    }
     .container .c1{
          background-color: rgba(10, 15, 26, .10);
        border-radius: 100%;
        height: 2%;
        top: 83%;
        left: 26%;
        width: 2%;
    }
 .container .c2,
 .container .c3,
 .container .c4,
 .container .c5,
 .container .c6,
 .container .c7,
 .container .c8,
 .container .c9 {
    background-color: rgba(10, 15, 26, .10);
    border-radius: 100%;
    height: 2%;
    top: 83%;
    width: 2%;
}

.container .c10{
      background-color: rgba(10, 15, 26, .10);
        border-radius: 100%;
        height: 2%;
        top: 83%;
        left: 87%;
        width: 2%;
    }

#loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #353536;
    color: #c7c4c4;
}
.loader-message {
    margin: 0 0 1rem 0;
    margin-left: -0.15em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.35;
    color: rgba(255,255,255,0.65);
    animation: loader-message-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes loader-message-pulse {
    from { opacity: 0.55; }
    to { opacity: 0.8; }
}
/* Four dots: same baseline as text, slightly softer contrast (cat-leg rhythm) */
.loader-dots {
    display: inline;
    margin-left: 0.45em;
    vertical-align: baseline;
}
.loader-dot {
    display: inline;
    font-size: 1.65em;
    font-weight: bold;
    vertical-align: baseline;
    color: rgba(255,255,255,0.9);
    animation: loader-dot-blink 1.5s ease-in-out infinite;
}
.loader-dot-1 { animation-delay: 0s; }
.loader-dot-2 { animation-delay: 0.19s; }
.loader-dot-3 { animation-delay: 0.38s; }
.loader-dot-4 { animation-delay: 0.56s; }
@keyframes loader-dot-blink {
    0%, 22% { color: #353536; }
    8% { color: rgba(255,255,255,0.9); }
    25%, 100% { color: #353536; }
}
.loader {
    width: 100px;
    height: 100px;
    -webkit-perspective: 100px;
    perspective: 100px;
    position: relative;
    margin: 0;
}

.picture{
    display: none;
    width: 40px;
    height: 25px;
   
    position: absolute;
    left: 5%;
    top:6%;
}

.moljaccrni-img {
    position: relative;
    display: block;
    width: 3px;
    height: 3px !important;
    position: absolute;
    z-index: 800020;
}



.key-hold-img,
.key-hold-bug{
    z-index: 80007;
    display: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* During moth encounter, keep key-hold image visible beneath moth; links remain disabled elsewhere */
.moth-encounter .key-hold-img{
    opacity: 1;
    pointer-events: none;
}
 
/* Moth keyhold overlay (shown by moth.js when shared location) */
.key-hold-moth1,
.key-hold-moth2,
.key-hold-moth3,
.key-hold-moth4,
.key-hold-moth5{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80008; /* above .key-hold-img */
    display: none; /* moth.js fades this in/out */
    pointer-events: none;
    opacity: 1; /* full opacity at center - gradient mask controls edge fade */
    /* Radial alpha: smaller solid center → more transparent overall */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.2) 100%);
            mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.2) 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}

/* During moth encounter, hide/disable keyhold links (visual and clicks) */
.moth-encounter .keyholdlink{
    visibility: hidden;
    pointer-events: none;
}

/* While todo overlay is open, hide/disable keyhold links */
body.todo-open .keyholdlink{
    visibility: hidden !important;
    pointer-events: none !important;
}

.bug-buttons{
    z-index: 80008;
    display: none;
    position: absolute;
    bottom: 20%;
    width: 100%;
}

.bug-buttons button {
    background-color: #585858;
    color: white;
    padding: 5px 15px;
    border: none;
    border-radius: 2px;
    margin: 20px;
}




.key-hold-img .govno{
    z-index: 80007;
    display: block !important;
}

.key-hold-img .teleskopImages{
    z-index: 80007;
    display: block !important;
}

.key-hold-img .wall-image-hold{
    z-index: 80007;
    display: block !important;
}

.wall-img-hold {
    opacity: 0.87;
}
.key-hold-img.govno-image {
    opacity: 1;
}

.galeri-org-img {
    opacity: 0.97;
}

.key-hold-img .zaklon{
    z-index: 80008;
    display: block !important;
}

.key-hold-img .blink{
    z-index: 1;
    display: block !important;
}

 .higher-z-index{
       z-index: 80008; 
}


.container a {
    display: block;
    position: absolute;
    background-color: aqua;
    height: 8%;
    top: -1%;
    left: 37%;
    width: 8%;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.container a:after {
    content: "m";
    font-size: 0;
    -webkit-animation: colorchange 0s;
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    background-color: skyblue;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    border-radius: 100%;
    z-index: 10;
}

/* Do not render the blue button styling for wiki trigger; keep komp cursor */
.container a[data-wiki]{
    background-color: transparent !important;
}
.container a[data-wiki]:after{
    display: none !important;
}

/* Monitor trigger: same treatment as wiki (transparent, no blue dot, komp cursor) */
.container a[data-monitor]{
    display: block !important;
    background-color: transparent !important;
}
.container a[data-monitor]:after{
    display: none !important;
}
[data-monitor]:hover{
    cursor: url(../images/cursor/cursorkomp.png), auto !important;
}
.container a[data-monitor],
.container a[data-wiki]{
    caret-color: transparent;
    outline: none !important;
    -webkit-user-modify: read-only;
    font-size: 0;
    line-height: 0;
    color: transparent;
}
.container a[data-monitor]:focus,
.container a[data-monitor]:focus-visible,
.container a[data-wiki]:focus,
.container a[data-wiki]:focus-visible{
    outline: none !important;
    caret-color: transparent;
}

body:not(.auto-link-click-enabled) .container a:not(.first-links){
    display: none;
    pointer-events: none;
    cursor: default;
}

body:not(.auto-link-click-enabled) .container a:after{
    display: none !important; 
}

/* a18: hide and disable a19 link until delay after first body click (spacehum) */
.a18-link-hidden{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Start button (a18 → a19) gets its own gray color instead of the global skyblue */
.container a.first-links:after {
    background-color: #888;
}

.c{
    visibility: hidden;
}


/*.bug-text,
.fixed-chat-parent{
    position: fixed;
    bottom: 10px;
    text-align: center;
    width: 100%;
    left: 0;
}*/

.container a.c:after{
    display: none !important;
}



@-webkit-keyframes blinker {
  /*  Temporarily disabled blinking - appear suddenly for gifTime testing */
    from {opacity: 0.8;transform: scale(1)}
    to {opacity: 0.8;transform: scale(1)}
}

/* Blinking text in moth tip (e.g. "find way up") */
@keyframes moth-tip-blink {
    from { opacity: 1; }
    to { opacity: 0.35; }
}
.moth-tip-blink {
    animation: moth-tip-blink 1s ease-in-out infinite alternate;
}

.mb-info-icon,
.mb-food-icon {
    animation: moth-btn-blink 0.5s ease-in-out infinite alternate;
}
@keyframes moth-btn-blink {
    0%   { opacity: 1; }
    100% { opacity: 0.25; }
}

.blink{
        color: aqua;

z-index: 14;
}

.container a.shown,
.container a.shown:after{
    pointer-events: auto;
    display: block;
}


/*
  .s, .d, .f, .e {  
    -webkit-animation:colorchange 13s;
}

@-webkit-keyframes colorchange {
    0% {
        background-color: #fafdfa;
    }
    
    50% {
        background-color: #fafdfa;
    }


}
*/
p {
    display: block;
    color: black;
    position: relative;
    margin-top: 10px;
    margin-left: 100px;

}

div.container {
    /* Natural image proportions: 690x771 (aspect ratio 1.117). Tuned for Chrome: less top, space at bottom */
    width: min(680px, 95vw);                    /* Desktop: 690px, Mobile: 95% of screen */
    height: min(771px, calc(95vw * 1.117));     /* Maintains exact 690:771 ratio */
    margin: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    touch-action: none;  /* Disable pinch-zoom on mobile */
}
/* Kill blinking caret globally — nothing in the game is editable */
div.container,
div.container *,
div.container *::before,
div.container *::after {
    caret-color: transparent !important;
    -webkit-user-modify: read-only;
    user-select: none;
    -webkit-user-select: none;
}
div.container *:focus,
div.container *:focus-visible {
    outline: none !important;
}
@media (hover: hover) and (pointer: fine) {
    div.container {
        zoom: 0.5;
    }
}

/* PayPal / Donate page (route paypal) */
.paypal-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.paypal-page-title {
    margin: 0 0 16px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    color: #323232;
}

/* Add the light cone effect (disabled when body has .no-light-cone) */
body:not(.no-light-cone) div.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center 30%,
        rgba(255, 255, 200, 0.15) 0%,
        rgba(255, 255, 200, 0.1) 30%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.77) 100%
    );
    pointer-events: none;
    z-index: 80009;
}

.load-img{
    position: relative !important;
}

body div.container .wall-image{
    z-index: 9;
    width: 25.7%;
    position: absolute;
    top: 0%;
    left: 0%;
    height: 14.3%;
    opacity: 0.85;
}



   


div.container img{
    width: 100%;                /* Fill container width */
    height: 100%;               /* Fill container height */
    object-fit: contain;        /* Maintain aspect ratio, no stretching */
    position: absolute;
    top: 0;
    left: 0;
}

.okrugli-link{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    background-color: blue;
   
}


.kukac{  
   z-index: 10;
}


.teleskop-pokazan .tunos{  
    display: none !important;
}

.slika-pokazana .sunos{  
    display: none !important;
}

.prozorpodloga-pokazan .skok{
    display: none !important;
}


.teleskop-img{
    /* never visible until tunos + ~8s (teleskop-revealed) or uvjek */
    display: block;
    opacity: 0;
    visibility: hidden;
    z-index: 80;
}

/* Only show telescope after teleskop-revealed (8s after tunos) or teleskop-pokazan-uvjek (override inline hide) */
.teleskop-pokazan.teleskop-revealed .teleskop-img,
.teleskop-pokazan.teleskop-pokazan-uvjek .teleskop-img{
    opacity: 1 !important;
    visibility: visible !important;
}

.teleskop-pokazan .t{
        display: block !important;
}

a.disabled{
        display: none !important;
}

/* Hide food-gated links by default */
a.gr-mothfood-block{
        display: none !important;
}
/* In B mode, show keyhold links even when food-gated, but keep them disabled/dimmed */
body[data-mode="b"] .container a.keyholdlink.gr-mothfood-block{
        display: block !important;
        pointer-events: none !important;
        opacity: 0.3 !important;
}
/* In B mode, if JS marks keyholdlink disabled, show it but non-clickable/dimmed */
body[data-mode="b"] .container a.keyholdlink.disabled{
        display: block !important;
        pointer-events: none !important;
        opacity: 0.3 !important;
}
/* Required-cats gate → keep keyhold links hidden regardless of mode */
body .container a.keyholdlink.gr-catcount-keyhold-block{
        display: none !important;
}

/* Overlay proxies that absorb clicks above disabled keyhold links */
.kh-proxy{
        position: absolute;
        z-index: 899999990011; /* above anchor dots and links */
        display: none;
        background: transparent;
        pointer-events: auto !important; /* must capture events */
}

/* Strong hide when window is closed (prevents first-toggle flash for m7 and its keyholds) */
body:not(.prozor-otvoren) .container a.m7{ display: none !important; }
body:not(.prozor-otvoren) .container a.keyholdlink[class*="m7"]{ display: none !important; }
/* Explicit marker for JS-enforced window-closed hides */
.container a.gr-prozor-closed{ display: none !important; }

/* Simple centered panel inside container for short messages */
.gr-panel{
        position: absolute;
        inset: 0; /* full container */
        display: none;
        z-index: 899999990020;
        pointer-events: none; /* allow clicks to pass (overlay is transient) */
}
.gr-panel .gr-panel-middle{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 96%;
        text-align: center;
        background: transparent;
        color: #323232;
        font-size: clamp(22px, 4.5vw, 34px);
        line-height: 1.25;
        white-space: normal;
        pointer-events: none;
}

.slika-pokazana .pipa{
        display: block !important;

}

.t{
    display: none !important;
}

.ot{
    display: block;
}

.zat,
.skok{
    display: none !important;
     z-index: 90;
}

.prozor-otvoren .zat,
.prozor-otvoren .skok{
    display: block !important;
}

.prozor-img{
    display: block !important;
    z-index: 90;
    transition: opacity 0s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 0;
}

body.prozor-otvoren:not(.prozor-otvoren-uvjek) .prozor-img{
    opacity: 1;
    transition: opacity 4s;
}

body.prozor-otvoren.prozor-otvoren-uvjek .prozor-img
{
    display: block !important;
    z-index: 90;
    opacity: 1;
    transition: opacity 4s;

}



body .prozorpodloga-img {
    opacity: 0;
    display: block !important;
    transition:3s all;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
        z-index: 80005;


}

/* Full-page overlay (entire window) – same behavior as prozorpodloga-img */
body .prozorpodlogacijeli-img {
    opacity: 0;
    display: block !important; /* match pp behavior: use opacity for fades */
    transition:3s all;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 80005; /* same layer as normal prozorpodloga */
    pointer-events: none; /* do not block clicks */
}

body.prozorpodloga-pokazan:not(.prozorpodloga-pokazan-uvjek) .prozorpodloga-img {
    opacity: 1;
}

body.prozorpodloga-pokazan.prozorpodloga-pokazan-uvjek .prozorpodloga-img {
    display: block !important;
    z-index: 80005;
    opacity: 1;
}

body.prozorpodlogacijeli-pokazan:not(.prozorpodlogacijeli-pokazan-uvjek) .prozorpodlogacijeli-img { opacity: 1; }
body.prozorpodlogacijeli-pokazan.prozorpodlogacijeli-pokazan-uvjek .prozorpodlogacijeli-img { opacity: 1; }

body.prozorpodlogacijeli-pokazan.prozorpodlogacijeli-pokazan-uvjek .prozorpodlogacijeli-img {
    display: block !important;
    z-index: 80006;
    opacity: 1;
}

.prozor-otvoren{
    display: block !important;
     z-index: 90;
}



.prozor-otvoren .ot{
    display: none !important;
    
}




#svemir{
    background-color: #1a1a1c;
    z-index: 99999;
    display: none;
    /* Match main container dimensions and positioning */
    width: min(680px, 95vw);
    height: min(771px, calc(95vw * 1.117));
    position: absolute !important;
    top: 0px;
    left: 0%;
   
}

.modal p{
    margin-left: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    line-height: 1.5;
}

.modal h4{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
}

/* Make wiki modal larger and slightly transparent for style consistency */
#wiki-modal{
    position: fixed !important;
    /* Match container width */
    width: min(680px, 95vw) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Anchor to bottom edge of main image container */
    bottom: calc(100vh - (120px + min(771px, calc(95vw * 1.117)))) !important;
    /* No box – only letters */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important; /* full-width text edge-to-edge */
}

/* Apply flex layout only when the modal is actually shown by jquery-modal */
#wiki-modal[style*="display: block"]{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
}

#wiki-text{
    font-size: 18px;
    color: #ffffff; /* readable on dark scene */
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    overflow: auto;
    max-height: 100%;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure inner elements never exceed container width */
#wiki-modal, #wiki-modal *{
    box-sizing: border-box;
    max-width: 100% !important;
}

.blocker{
    z-index: 9999999999 !important;
}



/* Default cursor outside container */
body{
    cursor: url(../images/cursor/cursorx.png), auto;
}
/* Eye cursor only inside main container */
div.container{
    cursor: url(../images/cursor/cursorlook.png), auto;
}
/* During gifTime (before auto-link-click is enabled), use cursorx even inside container */
body:not(.auto-link-click-enabled) div.container{
    cursor: url(../images/cursor/cursorx.png), auto !important;
}

/* Set cursormove cursor on links and buttons directly to prevent pointer cursor flash before hover */
a,
button{
    cursor: url(../images/cursor/cursormove.png), auto;
}

a:hover,
button:hover{
    cursor: url(../images/cursor/cursormove.png), auto;
}

[data-wiki]:hover{
    cursor: url(../images/cursor/cursorkomp.png), auto !important;
}

/*body.auto-link-click-disabled-medlodia *{*/
    /*cursor: not-allowed !important;*/
/*}*/

embed{
    position: absolute;
    top: -500px;
    left: -500px;
}
/*
[data-role="chat-parent"]
{
    border:1px solid #888270;
    border-radius: 4px;
    padding: 20px;
    width: 400px;
    display: inline-block;
    background-color: #fbfdfa;
    float: left;
}

[data-role="location"]
{
    height: 20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    line-height: 20px;
    text-align: center;
/    
}

[data-role="location"] h3{
    margin: 0 !important;
}

.main-chat-parent{
    display: none;
}

[data-role="chat-parent"] [data-role="message"]{
    height: 300px;
    overflow: auto;
    display: block;
}

[data-role="chat-parent-user"]{
    position: relative !important;
    margin: 0 auto;
    right: auto !important;
    top: auto !important;
}

[data-role="chat-parent"] textarea{
    width: 300px;
    float: left;
    height: 60px;
    border: 1px solid #888270;
}

[data-role="chat-parent-user"] textarea{
    width: 247px;
    float: left;
    height: 30px;
    border: 1px solid #888270;
}


[data-role="chat-parent-user"] button{
    height: 30px;
    float: left;
    border-left: 0;
    border: 1px solid #888270;
    background-color: white;
}

[data-role="chat-parent"] button{
    width: 100px;
    height: 60px;
    float: left;
    border-left: 0;
    border: 1px solid #888270;
    background-color: white;
}

.admin-container{
    padding: 60px;
    text-align: center;
}
*/
.info h3{
    font-weight: bold;
}

.info h3,
.info p{
    display: inline-block;
    color: black;
    font-size: 12px;
    margin: 0;
}

.info{
    margin-left: -20px;
    margin-right: -20px;
    border-bottom: 1px solid #888270;
    padding-bottom: 5px;
}

.user-chat{
    position: fixed;
    width: 300px;
    top: 20px;
    right: 20px;
}

.user-chat[data-role="chat-parent"] textarea{
    width: 200px;
}

.container a[class*="m0"]:after { background-color: rgb(194, 176, 75); }
.container a[class*="m0b"]:after { background-color: rgb(99, 184, 192); }
.container a[class*="m1"]:after { background-color: rgb(161, 85, 165); }
.container a[class*="m2"]:after { background-color: rgb(135, 131, 60); }
.container a[class*="m3"]:after { background-color: rgb(111, 171, 95); }
.container a[class*="m4"]:after { background-color: rgb(186, 84, 53); }
.container a[class*="m5"]:after { background-color: rgb(96, 140, 157); }
.container a[class*="m6"]:after { background-color: rgb(41, 106, 72); }
.container a[class*="m7"]:after { background-color: rgb(41, 41, 75); }

/* Keyhold link arrows: one shape (triangle + rect handle) rotated per direction
   Left: t3m4, t3m1, t7m5   Right: t4bm5, t4m7   Up: t0bm0   Down: t0bm1   (t4m5 = normal circle)
   Handle shortened: 100% -> 68% so overall arrow length is less.
*/
.container a.t1m7:after,
.container a.t3m4:after,
.container a.t3m1:after,
.container a.t7m5:after,
.container a.t4bm5:after,
.container a.t4m7:after,
.container a.t0bm0:after,
.container a.t0bm1:after{
    width: 40px;
    height: 26px;
    border-radius: 0;
    transform: translate(-50%, -50%);
    clip-path: polygon(
        68% 23%,
        45% 23%,
        45% 0%,
        0% 50%,
        45% 100%,
        45% 77%,
        68% 77%
    );
}
/* LEFT (default) */
.container a.t3m4:after,
.container a.t3m1:after, 
.container a.t7m5:after{
    transform: translate(-50%, -50%) rotate(0deg);
}
/* RIGHT */
.container a.t4bm5:after,
.container a.t4m7:after{
    transform: translate(-50%, -50%) rotate(-180deg);
}
/* UP */
.container a.t1m7:after,
.container a.t0bm0:after{
    transform: translate(-50%, -50%) rotate(-90deg);
}
/* DOWN */
.container a.t0bm1:after{
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Puzzle dot colors matching anchor mX colors (original RGB palette) */
.pzl-proxy.m0 .pzl-dot{ background-color: rgb(194, 162, 75); }
.pzl-proxy.m0b .pzl-dot{ background-color: rgb(99, 184, 192); }
.pzl-proxy.m1 .pzl-dot{ background-color: rgb(145, 80, 149); }
.pzl-proxy.m2 .pzl-dot{ background-color: rgb(123, 112, 94); }
.pzl-proxy.m3 .pzl-dot{ background-color: rgb(110, 156, 117); }
.pzl-proxy.m4 .pzl-dot{ background-color: rgb(188, 114, 34); }
.pzl-proxy.m5 .pzl-dot{ background-color: rgb(96, 140, 157); }
.pzl-proxy.m6 .pzl-dot{ background-color: rgb(41, 106, 72); }
.pzl-proxy.m7 .pzl-dot{ background-color: rgb(56, 56, 88); }

/* Shift normal m0 anchor dot 5% left (visual only; hitbox unchanged) */
body .container a.m0:after{
    left: calc(50% - 5%) !important;
    transform: translate(-50%, -50%) !important;
}
body .container a.m6:after{
    top: calc(50% - 17%) !important;
    transform: translate(-50%, -50%) !important;
}
/* Keyhold arrow up/down: override m0/m1 transform so rotation wins (they share m0/m1 class) */
body .container a.t1m7:after{
    transform: translate(-50%, -50%) rotate(90deg) !important;
}
body .container a.t0bm0:after{
    transform: translate(-50%, -50%) rotate(90deg) !important;
}
body .container a.t0bm1:after{
    transform: translate(-50%, -50%) rotate(-90deg) !important;
}
/* Keyhold arrow RIGHT: flip horizontally so arrow points right (base shape points left) */
body .container a.t4bm5:after,
body .container a.t4m7:after{
    transform: translate(-50%, -50%) scaleX(-1) !important;
}
@keyframes wiggleHands {
    0% { transform: translate(-2px, -2px); }
    100% { transform: translate(2px, 2px); }
}

.piano-hands {
    position: absolute;
    top: 52.4%;
    left: 43.3%;
    width: 2.3%;
    height: 2.3%;
    background: rgb(50, 50, 50);
    animation: wiggleHands 0.5s alternate infinite ease-in-out;
    pointer-events: none;
    z-index: 80006;  /* Use a more reasonable z-index that's still above other elements */
    display: none;
    will-change: transform;  /* Optimize animation performance */
}



/* First appearance fly-in (from mid-right/window) */
[data-role="bug"].shown-bug.first-appear {
    /* Compose fly-in with the base hover animation so .lokX rules don't override it */
    animation: bugFirstAppear 5s ease-out both, unifiedBugAnim var(--bug-animation-duration) forwards;
}

@keyframes bugFirstAppear {
    0% {
        opacity: 0;
        transform: translate(140px, -20px) scale(0.8) rotate(20deg);
        filter: blur(1px);
    }
    30% {
        opacity: 0.6;
        transform: translate(80px, -10px) scale(0.9) rotate(10deg) scaleX(0.6);
    }
    60% {
        opacity: 1;
        transform: translate(24px, -6px) scale(1.0) rotate(5deg) scaleX(1);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1.0) rotate(0deg) scaleX(1);
        filter: blur(0);
    }
}

/* Moth buttons overlay */
.moth-btns{
    position: fixed; /* independent of mode/layout */
    bottom: 39%; /* lift above main template UI */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 899999990010; /* above main tpl */
    pointer-events: auto;
}
/* In C mode, place buttons at lower center of the container */
.moth-encounter .moth-btns{ display: flex; gap: 10px; }
.moth-btns .moth-btn{
    background: rgba(60,60,60,0.85);
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 6px 10px;
    margin-left: 8px;
    font-size: 12px;
    cursor: pointer;
}
.moth-btns .moth-btn:focus{ outline: 1px solid #ddd; }

/* Fast, responsive cursor for moth buttons (avoid loading custom image cursor) */
.moth-btns,
.moth-btns .moth-btn,
.moth-btns .moth-btn:hover,
.moth-btns .moth-btn:focus,
.moth-btns .moth-btn:active{
    cursor: pointer !important;
}

/* B-mode distant moth CSS triangle (independent of C-mode moth) */
.keyhold-moth-css{
    position: absolute;
    z-index: 80008; /* behind key-hold overlays (80007) */
    display: none;
    pointer-events: none;
    opacity: 0.75; /* faint in distance */
    outline: none !important;
    caret-color: transparent;
    color: transparent;
    user-select: none;
    -webkit-user-select: none;
    font-size: 0;
    line-height: 0;
}
.keyhold-moth-css:focus,
.keyhold-moth-css:focus-visible{
    outline: none !important;
    caret-color: transparent;
}
#mothhide-clickpad{
    outline: none !important;
    caret-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.keyhold-moth-css.shown-bug{
    width: 0;
    height: 0;
    border-left: min(calc(1vw * 1.26), 8.32px) solid transparent;
    border-right: min(calc(1vw * 1.26), 8.32px) solid transparent;
    border-bottom: min(calc(1.6vw * 1.26), 15.12px) solid #323232;
    transform-origin: center center;
    animation: unifiedBugAnim var(--bug-animation-duration) forwards;
}
body[data-mode="b"] .keyhold-moth-css.shown-bug{
    opacity: 0.5;
}
/* Glow on distant moth — drop-shadow traces the actual triangle pixels, never offsets */
.keyhold-moth-css.mh-glow{
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.796)) drop-shadow(0 0 6px rgba(255,255,255,0.5));
}
/* Lok6 link-button visible only in B mode via JS */
.lok6-btn{
    background-color: rgba(255, 0, 153, 0.014);
    border: none;
  /*  border-radius: 100%;*/
        height: 16%;
        top: 12%;
        left: 69%;
        width: 12%;
        z-index: 79999;
  
}

/* Simple image overlay for todo closeup */
.todo-closeup-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80012;
    display: none;
}
.todo-closeup-wrap img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}
/* todocloseup2 fully opaque (others stay semi-transparent) */
.todo-closeup-wrap img[src*="todocloseup2"]{
    opacity: 1;
}

/* Monitor overlay matches container (same as todo closeup) */
.monitor-closeup-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80012;
    display: none;
}
.monitor-closeup-wrap .monitor-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    opacity: 0.9;
}
/* Monitor fully opaque during mothfind-done 3s hold (click on distant moth) */
body.monitor-mothfind-done .monitor-closeup-wrap .monitor-image{
    opacity: 1;
}

/* While monitor overlay is open, hide keyhold links (only during overlay) */
body.monitor-open .container a.keyholdlink{
    display: none !important;
}
/* Also hide food-gated keyhold links and their proxies during monitor overlay */
body.monitor-open .container a.keyholdlink.gr-mothfood-block{
    display: none !important;
}
body.monitor-open .container .kh-proxy{
    display: none !important;
}

/* Hide info-panel boxes while monitor overlay is open */
body.monitor-open .info-panel .panel-cats-box,
body.monitor-open .info-panel .panel-moth-box,
body.monitor-open .info-panel .panel-mothhide-box{
    display: none !important;
}

/* Puzzle status text (e.g. "look with eye") — own size so it is not shrunk by panel/row */

/* Pulse triangles inside requirement messages */
.info-panel .tri{
    display: inline-block;
    animation: triPulse 1s ease-in-out infinite alternate;
}
@keyframes triPulse{
    0%{ color: inherit; filter: brightness(1); }
    100%{ color: #ffffff; filter: brightness(1.6); }
}

/* Puzzle overlay */
.puzzle-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 899999990060; /* ensure above all content stacks */
    pointer-events: none; /* overlay is informative; links remain clickable */
    padding: 0; /* avoid offsetting absolute markers; legend can space itself */
    box-sizing: border-box;
}
.puzzle-overlay *{ pointer-events: none !important; }
.puzzle-on .pzl-proxy{ display:flex !important; opacity:1 !important; }
.puzzle-on .pzl-marker .pzl-dot{ opacity:1 !important; }
.puzzle-on .pzl-marker .pzl-dot.pzl-dot-dest{ animation: pzl-dest-blink 5.7s ease-in-out infinite alternate !important; }
.pzl-legend{ color:#ddd; font: 13px/1.3 Arial, Helvetica, sans-serif; margin-bottom: 4px; }
.pzl-label{ font-size: 11px; color:#ddd; }
/* Fail banner */
.pzl-fail-banner{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 899999990065;
    background: transparent; color: #323232;
    font-size: clamp(22px, 4.5vw, 34px); font-weight: 600;
    line-height: 1.25; text-align: center;
    pointer-events: none;
    text-transform: uppercase;
}

/* In Puzzle mode: visually hide normal m-links (keep them clickable) */
body.puzzle-on .container a.m0,
body.puzzle-on .container a.m0b,
body.puzzle-on .container a.m1,
body.puzzle-on .container a.m2,
body.puzzle-on .container a.m3,
body.puzzle-on .container a.m4,
body.puzzle-on .container a.m5,
body.puzzle-on .container a.m6,
body.puzzle-on .container a.m7{
    background-color: transparent !important;
}
body.puzzle-on .container a.m0:after,
body.puzzle-on .container a.m0b:after,
body.puzzle-on .container a.m1:after,
body.puzzle-on .container a.m2:after,
body.puzzle-on .container a.m3:after,
body.puzzle-on .container a.m4:after,
body.puzzle-on .container a.m5:after,
body.puzzle-on .container a.m6:after,
body.puzzle-on .container a.m7:after{
    display: none !important;
}

/* Default: keep normal m-links visually hidden to avoid flashes during mode toggles
   They remain clickable/invisible; puzzle mode explicitly force-shows via .pzl-show */
.container a.m0,
.container a.m0b,
.container a.m1,
.container a.m2,
.container a.m3,
.container a.m4,
.container a.m5,
.container a.m6,
.container a.m7{
    background-color: transparent !important;
}
.container a.m0:after,
.container a.m0b:after,
.container a.m1:after,
.container a.m2:after,
.container a.m3:after,
.container a.m4:after,
.container a.m5:after,
.container a.m6:after,
.container a.m7:after{
    display: none !important;
}

/* Positioned clones overlayed at original spots */
.pzl-clone{
    position: absolute;
    pointer-events: none;
    z-index: 899999990050 !important;
    width: 25px; height: 25px; /* exact like a:after */
    border-radius: 100%;
    background-color: skyblue;
}
.pzl-clone.pzl-unavailable{ filter: grayscale(100%); opacity: 0.6; }
.pzl-clone.pzl-available{ filter: none; opacity: 1; }

/* Reuse existing positions from container classes for approximate placement */
.pzl-clone.m0{ top: 28%; left: 10%; }
.pzl-clone.m0b{ top: 28%; left: 10%; }
.pzl-clone.m1{ top: 3%; left: 4%; }
.pzl-clone.m2{ top: 5%; left: 24%; }
.pzl-clone.m3{ top: 46%; left: 75%; }
.pzl-clone.m4{ top: 45%; left: 33%; }
.pzl-clone.m5{ top: 36%; left: 63%; }
.pzl-clone.m6{ top: 5%; left: 66%; }
.pzl-clone.m7{ top: 61%; left: 68%; }

/* Proxy boxes that mirror anchor boxes exactly (for pages missing an anchor) */
.pzl-proxy{ position:absolute; pointer-events:none; z-index:899999990050; display:flex; align-items:center; justify-content:center; }
.pzl-proxy .pzl-marker{ position:static; inset:auto; }
.pzl-proxy .pzl-wrap{ display:inline-block; transform: translateX(var(--pzl-nudge-x, -5%)); }
.pzl-proxy .pzl-dot{ width:25px; height:25px; border-radius:100%; background: skyblue; transition: filter 120ms ease, box-shadow 120ms ease, transform 120ms ease; display:inline-block; }
.pzl-proxy.pzl-unavailable{ filter:grayscale(100%); opacity:0.6; }
.puzzle-on .pzl-marker.pzl-unavailable,
.puzzle-on .pzl-proxy.pzl-unavailable,
.puzzle-on .pzl-proxy.pzl-available{
    filter: none !important;
    opacity: 1 !important;
    z-index: 899999990055 !important;
}
/* Emphasize active (currently usable) proxies */
/* Active-link highlighting removed */
/* Route start accent */
.puzzle-on .pzl-proxy.pzl-start .pzl-dot{ outline: 2px solid #4caf50; box-shadow: 0 0 8px rgba(76,175,80,0.9); }
.pzl-dot-dest{ animation: pzl-dest-blink 5.7s ease-in-out infinite alternate; }
@keyframes pzl-dest-blink { 0% { filter: opacity(1); } 100% { filter: opacity(0.3); } }
/* No de-emphasis when not active */
.pzl-proxy.m0{ top:28.2%; left:3.2%; width:19%; height:19%; --pzl-nudge-x: -5%; }
.pzl-proxy.m0b{ top:31.6%; left:16.6%; width:19%; height:19%; }
.pzl-proxy.m1{ top:61.5%; left:52.5%; width:19%; height:19%; }
.pzl-proxy.m2{ top:6.6%; left:25.6%; width:19%; height:19%; }
.pzl-proxy.m3{ top:47.6%; left:76.6%; width:19%; height:19%; }
.pzl-proxy.m4{ top:46.6%; left:34.6%; width:19%; height:19%; }
.pzl-proxy.m5{ top:37.6%; left:64.6%; width:19%; height:19%; }
.pzl-proxy.m6{ top:5.6%; left:72.6%; width:1%; height:1%; }
.pzl-proxy.m7{ top:62.6%; left:69.6%; width:19%; height:19%; }

/* Explicit nudge: move puzzle m0 dot 5% left */
.pzl-proxy.m0 .pzl-wrap{ transform: translateX(-5%) !important; }

/* Puzzle toggle button */
.puzzle-toggle{
    position: fixed; right: 10px; top: 10px; z-index: 899999990030;
    background: rgba(60,60,60,0.85); color: #fff; border: 0; border-radius: 3px; padding: 6px 10px; font-size: 12px;
    cursor: pointer;
}
.puzzle-toggle[aria-pressed="true"]{ background: rgba(40,100,60,0.9); }

/* Moth challenge toggle */
.moth-challenge-toggle{
    position: fixed; right: 70px; top: 10px; z-index: 899999990030;
    background: rgba(60,60,60,0.85); color: #fff; border: 0; border-radius: 3px; padding: 6px 10px; font-size: 12px;
    cursor: pointer;
}
.moth-challenge-toggle[aria-pressed="true"]{ background: rgba(100,60,40,0.9); }

/* Moth hide toggle */
.moth-hide-toggle{
    position: fixed; right: 130px; top: 10px; z-index: 899999990030;
    background: rgba(60,60,60,0.85); color: #fff; border: 0; border-radius: 3px; padding: 6px 10px; font-size: 12px;
    cursor: pointer;
}
.moth-hide-toggle[aria-pressed="true"]{ background: rgba(60,100,160,0.9); }

/* Hide moth, mothhide, puzzle toggle buttons */
.puzzle-toggle,
.moth-challenge-toggle,
.moth-hide-toggle{
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Intro toggle */
.intro-toggle{
    position: fixed; right: 190px; top: 10px; z-index: 899999990030;
    background: rgba(60,60,60,0.85); color: #fff; border: 0; border-radius: 3px; padding: 6px 10px; font-size: 12px;
    cursor: pointer;
}
.intro-toggle[aria-pressed="true"]{ background: rgba(140,100,40,0.9); }

/* Full-screen prozorpodloga overlay image */
.prozorpodloga-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/prozorpodloga/prozorpodlogacijeli.png') center center / cover no-repeat;
    z-index: 80005;
    display: none;
    pointer-events: none;
}


/* Hide unused frame overlay to prevent occasional full-size flashes */
.framehhh{
    display: none !important;
}