* {box-sizing:border-box;}

.flip {
    position: relative;
}
.flip > .front, .flip > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: .5s;
    transition-property: transform, opacity;
}
.flip > .front {
    transform: rotateY(0deg);
    border-radius:8px;
}
.flip > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
    border-radius:8px;
}
.flip.hover > .front {
    transform: rotateY(180deg);
}
.flip.hover > .back {
    opacity: 1;
    transform: rotateY(0deg);
}

#GameContainer {
  width: 100%;
  height: 100vh;
  align-items: initial;
  padding: 0px;
  overflow: auto;
  position:relative;
}


#top-line {
  width:100%;
  height:75px;
  background:silver;
  padding:5px;
  position:fixed;
  top:0;
  left:0;
  z-index: 99;
  overflow-y: auto;

}


#top-line .line{
  width:100%;
  min-width: 800px;
  display: flex;
  align-items: center;
}

#top-line .log-info{
  background: #FFF;
  padding:10px;
  font-size: 11px;
  width:400px;
  height:60px;
  overflow: auto;
  font-size: 11px;
  line-height: 12px;
  border-radius: 10px;
  display: inline-flex;
  position: relative;
}


#top-line .toplink{
    font-size: 11px;
    line-height: 12px;
}


#top-line .right-buttons{

    position: absolute;
    right:10px;
    top:10px;
    width:110px;
}


#top-line .right-buttons > a{
    display: block;
    width:100%;
    margin-bottom: 5px;
}

#game-block {
  width:100%;
  height:100vh;

}


#game-block > #leftMenu {
  width:35%;
  max-width: 350px;
  height: 100%;
  background-color: #e9edf1;
  border-right: solid 1px #dadada;
  padding:10px;
  display:none;
}

#gameField {
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  background: white;
  background: #43bbd1;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  touch-action: none;
}


.sea-container {
  position:absolute;
  top:0px;
  left:0px;
  width:4000px;
  height:4000px;
  width:calc(100vw + 5600px);
  height:calc(100vh + 5600px);
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  touch-action: none;
}

.sea-container > .sea-bg {
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  background:url(/s_jckl/game-img//water_animated.gif) 0 0 repeat;
  background:url(/s_jckl/game-img//ocean.gif) 0 0 repeat;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  touch-action: none;

}

.sea-container > .sea-bg > .sea {
  position:relative;
  
}



.f-tile {
  display:block;
  width:200px;
  height:200px;
  background:#A3A3D1;
  text-align:center;
  position:absolute;
  border-radius:0;
}


 .f-tile.tile-0 {
   background:url(/s_jckl/game-img//water_animated.gif) 0 0 repeat;
   border-radius:0;
   border:none;
 }


.f-tile.tile-1, .f-tile.tile-1.flip > .back {
   background:url(/s_jckl/game-img//sand.jpg) 0 0 repeat;
   background-size:cover;
   border-radius:0;
   border:solid 1px #cebe41;
 }

 .f-tile.tile-2, .f-tile.tile-2.flip > .back {
   background:url(/s_jckl/game-img//grass.jpg) 0 0 repeat;
   background-size:cover;
   border-radius:0;
   border:solid 1px #0f4d09;
 }



.f-tile.flip {
  background:none;
  border-radius:0;
  border:none;
}

.f-tile.flip > .front {
    background-image:url(/s_jckl/game-img/Fon.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    border-radius:0;
    border:solid 1px #615a5a;
}



.f-tile.rum-usable, 
.f-tile.rum-usable.flip > .back {
  border: ridge 4px #cf5c0a;
 }

.f-tile.rum-usable::after {
  content:'';
  display: block;
  width: 80px;
  height: 85px;
  background: url(/s_jckl/game-img/rum.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 0px;
  top: 0px;
  animation:rumturn 2s infinite;
 }


 .f-tile.rum-used::after {
  content:'';
  display: block;
  width: 80px;
  height: 85px;
  background: url(/s_jckl/game-img/rum.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 0px;
  top: 0px;
  animation:rumturn 2s;
 }



.f-tile.tile-1.flip.type-6 > .back::before, 
.f-tile.tile-1.type-6::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 200px;
  top:0px;
  left:0px;
  background:url(/s_jckl/game-img//vert1.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-7 > .back::before, 
.f-tile.tile-1.type-7::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 200px;
  top:0px;
  left:0px;
  background:url(/s_jckl/game-img//vert2.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-8 > .back::before, 
.f-tile.tile-1.type-8::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 200px;
  top:0px;
  left:0px;
  background:url(/s_jckl/game-img//vert3.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-9 > .back::before, 
.f-tile.tile-1.type-9::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 200px;
  top:0px;
  left:0px;
  background:url(/s_jckl/game-img//vert4.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-44 > .back::before, 
.f-tile.tile-1.type-44::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 200px;
  top:0px;
  left:0px;
  background:url(/s_jckl/game-img//vert5.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-12 > .back::before, 
.f-tile.tile-1.type-12::before,
.f-tile.tile-1.flip.type-13 > .back::before, 
.f-tile.tile-1.type-13::before,
.f-tile.tile-1.flip.type-14 > .back::before, 
.f-tile.tile-1.type-14::before,
.f-tile.tile-1.flip.type-15 > .back::before, 
.f-tile.tile-1.type-15::before,
.f-tile.tile-1.flip.type-11 > .back::before, 
.f-tile.tile-1.type-11::before {
   content:'';
   display: block;
   position:absolute;
   width:120px;
   height: 120px;
   top:40px;
   left:40px;
   background:url(/s_jckl/game-img//treasure_chest.png) 0 0 repeat;
   background-size:cover;
 }


.f-tile.tile-1.flip.type-10 > .back::before, 
.f-tile.tile-1.type-10::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//ice.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-2 > .back::before, 
.f-tile.tile-1.type-2::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//arrow4h.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-3 > .back::before, 
.f-tile.tile-1.type-3::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//arrow4d.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-4 > .back::before, 
.f-tile.tile-1.type-4::before {
  content:'';
  display: block;
  position:absolute;
  width:180px;
  height: 180px;
  top:10px;
  left:10px;
  background:url(/s_jckl/game-img//arrow3.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-5 > .back::before, 
.f-tile.tile-1.type-5::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 73px;
  bottom:0px;
  left:0px;
  background:url(/s_jckl/game-img//hole.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-16 > .back::before, 
.f-tile.tile-1.type-16::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//balloon.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-17 > .back::before, 
.f-tile.tile-1.type-17::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//crocodile.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-19 > .back::before, 
.f-tile.tile-1.type-19::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//castle.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-20 > .back::before, 
.f-tile.tile-1.type-20::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//saint.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-21 > .back::before, 
.f-tile.tile-1.type-21::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//cannon.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-22 > .back::before, 
.f-tile.tile-1.type-22::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//cannibal.png) 0 0 repeat;
  background-size:cover;
}



.f-tile.tile-1.flip.type-18 > .back::before, 
.f-tile.tile-1.type-18::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//horse.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-23 > .back::before, 
.f-tile.tile-1.type-23::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//barrel.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-26 > .back::before, 
.f-tile.tile-1.type-26::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//batut.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-27 > .back::before, 
.f-tile.tile-1.type-27::before {
  content:'';
  display: block;
  position:absolute;
  width:200px;
  height: 200px;
  top:0px;
  left:0px;
  background:url(/s_jckl/game-img//jungle.png) 0 0 repeat;
  background-size:cover;
}

.f-tile.tile-1.flip.type-28 > .back::before, 
.f-tile.tile-1.type-28::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//bank.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-29 > .back::before, 
.f-tile.tile-1.type-29::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  /*top:40px;
  left:40px;*/
  top: 22px;
  right: 0px;
  background:url(/s_jckl/game-img//lighthouse.png) 0 0 repeat;
  background-size:cover;
}



.f-tile.tile-1.flip.type-30 > .back::before, 
.f-tile.tile-1.type-30::before {
  content:'';
  display: block;
  position:absolute;
  width:180px;
  height: 180px;
  top:10px;
  left:10px;
  background:url(/s_jckl/game-img//earthquake.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-35 > .back::before, 
.f-tile.tile-1.type-35::before {
  content:'';
  display: block;
  position:absolute;
  width:120px;
  height: 120px;
  top:40px;
  left:40px;
  background:url(/s_jckl/game-img//cave.png) 0 0 repeat;
  background-size:cover;
}


.f-tile.tile-1.flip.type-38 > .back::before, 
.f-tile.tile-1.type-38::before,
.f-tile.tile-1.flip.type-39 > .back::before, 
.f-tile.tile-1.type-39::before{
   content:'';
   display: block;
   position:absolute;
   width:120px;
   height: 120px;
   top:40px;
   left:40px;
   background:url(/s_jckl/game-img//arrow1.png) 0 0 repeat;
   background-size:cover;
 }


.f-tile.tile-1.flip.type-40 > .back::before, 
.f-tile.tile-1.type-40::before,
.f-tile.tile-1.flip.type-41 > .back::before, 
.f-tile.tile-1.type-41::before{
   content:'';
   display: block;
   position:absolute;
   width:120px;
   height: 120px;
   top:40px;
   left:40px;
   background:url(/s_jckl/game-img//arrow2.png) 0 0 repeat;
   background-size:cover;
 }

/*DIRECTIONS OF OBJECTS*/
.f-tile.tile-1.flip.direction-2 > .back::before, 
.f-tile.tile-1.direction-2::before {
  transform: rotate(45deg);
}

.f-tile.tile-1.flip.direction-3 > .back::before, 
.f-tile.tile-1.direction-3::before {
  transform: rotate(90deg);
}


.f-tile.tile-1.flip.direction-4 > .back::before, 
.f-tile.tile-1.direction-4::before {
  transform: rotate(135deg);
}

.f-tile.tile-1.flip.direction-5 > .back::before, 
.f-tile.tile-1.direction-5::before {
  transform: rotate(180deg);
}

.f-tile.tile-1.flip.direction-6 > .back::before, 
.f-tile.tile-1.direction-6::before {
  transform: rotate(225deg);
}

.f-tile.tile-1.flip.direction-7 > .back::before, 
.f-tile.tile-1.direction-7::before {
  transform: rotate(270deg);
}

.f-tile.tile-1.flip.direction-8 > .back::before, 
.f-tile.tile-1.direction-8::before {
  transform: rotate(315deg);
}

/**/

.f-tile.selectable, 
.f-tile.flip.selectable >.front,
.f-tile.flip.selectable >.back {
  cursor:pointer;
  box-shadow: inset 0px 0px 20px rgb(0 198 218);
  transition: all 0.2s ease-out;
}

.f-tile.selectable:hover,
.f-tile.flip.selectable:hover >.front,
.f-tile.flip.selectable:hover >.back {
  box-shadow: inset 0px 0px 70px rgb(0 198 218);
}


.f-tile.action-selectable, 
.f-tile.flip.action-selectable >.front,
.f-tile.flip.action-selectable >.back {
  cursor:pointer;
  box-shadow: inset 0px 0px 20px rgb(255 106 0);
  transition: all 0.2s ease-out;
}

.f-tile.action-selectable:hover, 
.f-tile.flip.action-selectable:hover >.front,
.f-tile.flip.action-selectable:hover >.back {
  box-shadow: inset 0px 0px 70px rgb(255 106 0);
}


.f-tile.action-selectable.selected, 
.f-tile.flip.action-selectable.selected >.front,
.f-tile.flip.action-selectable.selected >.back {
  box-shadow: inset 0px 0px 70px rgb(255 106 0);
}

.f-object {
  position:absolute;
  transition: all 0.4s ease-out;
}

.f-ship {
  width:260px;
  height:284px;
  background:url(/s_jckl/game-img//ship.png) 0 0 no-repeat;
  background-size:cover;
  transition: all 0.3s ease-in;
  user-select:none;
}


.f-coin {
  width:43px;
  height:41px;
  background:url(/img/oldcoin.png) 0 0 repeat;
  background-size:cover;
  transition: all 0.3s ease-in;
  user-select:none;
}

.f-coin.selected-mine{
    z-index: 9;
}

.f-coin.selected-mine::after 
{
    content:'';
    display: block;
    position: absolute;
    top:0px;
    left:0px;
    width:43px;
    height: 41px;
    box-shadow: inset 0px 0px 10px rgb(0 198 218);
    border-radius: 20px;

}

.f-rum{
  background:url(/s_jckl/game-img/rum.png) 0 0 no-repeat;
  background-size:contain;
  width:70px;
  height:78px;
}


.f-rum.moving{
  animation: rumrun 0.5s linear;
}


.f-plane{
  background:url(/s_jckl/game-img/plane.png) 0 0 no-repeat;
  background-size:contain;
  width:180px;
  height:111px;
  z-index: 22;
}

.f-char {
  width:60px;
  height:88px;
  background:url(/s_jckl/game-img//pirate.png) 0 0 no-repeat;
  background-size:cover;
  transition: all 0.3s ease-in;
}


.f-char.head{
  background:url(/s_jckl/game-img//pirate_head.png) 0 0 no-repeat;
  background-size:cover;
  width:50px;
  height: 50px;
}


.f-char.char-1{
  background:url(/s_jckl/game-img//pirates/red-1.png) 0 0 no-repeat;
  background-size:cover;
  width:94px;
  height: 120px;
}

.f-char.char-2{
  background:url(/s_jckl/game-img//pirates/red-2.png) 0 0 no-repeat;
  background-size:cover;
  width:69px;
  height: 120px;
}

.f-char.char-3{
  background:url(/s_jckl/game-img//pirates/red-3.png) 0 0 no-repeat;
  background-size:cover;
  width:84px;
  height: 120px;
}

.f-char.char-1.head {
  width:48px;
  height:39px;
  background:url(/s_jckl/game-img//pirates/red-1-head.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-2.head {
  width:37px;
  height:46px;
  background:url(/s_jckl/game-img//pirates/red-2-head.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-3.head {
  width:28px;
  height:29px;
  background:url(/s_jckl/game-img//pirates/red-3-head.png) 0 0 no-repeat;
  background-size:cover;
}


.f-char.char-1.blue {
  background:url(/s_jckl/game-img//pirates/blue-1.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-2.blue {
  background:url(/s_jckl/game-img//pirates/blue-2.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-3.blue {
  background:url(/s_jckl/game-img//pirates/blue-3.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-1.blue.head {
  background:url(/s_jckl/game-img//pirates/blue-1-head.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-2.blue.head {
  background:url(/s_jckl/game-img//pirates/blue-2-head.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.char-3.blue.head {
  background:url(/s_jckl/game-img//pirates/blue-3-head.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.friday{
  background:url(/s_jckl/game-img//pirates/chunga.png) 0 0 no-repeat;
  background-size:cover;
  width:54px;
  height: 120px;
}
.f-char.friday.head{
  width:36px;
  height:40px;
  background:url(/s_jckl/game-img//pirates/chunga-head.png) 0 0 no-repeat;
  background-size:cover;
}


.f-char.priest{
  background:url(/s_jckl/game-img//pirates/preacher.png) 0 0 no-repeat;
  background-size:cover;
  width:80px;
  height: 120px;
}

.f-char.priest.head{
  width:40px;
  height:40px;
  background:url(/s_jckl/game-img//pirates/preacher-head.png) 0 0 no-repeat;
  background-size:cover;
}

.f-char.drunk-ass {
  transform: rotate(-90deg);
}



.f-char.selected::before{
    position: absolute;
    content: '';
    display: block;
    bottom: -16px;
    left: 14px;
    width: 60px;
    height: 60px;
    box-shadow: inset 0px 0px 20px rgb(0 198 218);
    border-radius: 50%;
    transform: rotate3d(10, 1, 1, 258deg);
    z-index: -999;
}


.f-object.trap-1::after,
.f-object.trap-2::after,
.f-object.trap-3::after,
.f-object.trap-4::after,
.f-object.trap-5::after,
.f-object.trap-6::after {
    content:'1';
    position:absolute;
    display: block;
    right:-10px;
    top:-10px;
    color:white;
    font-size: 18px;
    line-height: 18px;
    text-shadow: 1px 1px 1px #000;
}

.f-char.selected.trap-1::before,
.f-char.selected.trap-2::before,
.f-char.selected.trap-3::before,
.f-char.selected.trap-4::before,
.f-char.selected.trap-5::before,
.f-char.selected.trap-6::before,
.f-char.selected.hole::before,
.f-char.selected.cave::before{
    left:-10px;
    bottom:-35px;
}



.f-object.trap-1::after{
    content:'1';
}
  

.f-object.trap-2::after{
    content:'2';
}


.f-object.trap-3::after{
    content:'3';
}


.f-object.trap-4::after{
    content:'4';
}


.f-object.trap-5::after{
    content:'5';
}

.f-object.trap-6::after{
  content:'6';
}


.not-selectable {
  user-select:none;
}



.ingame-context-menu {
  position:absolute;
  top:-100px;
  left:-100px;
  width:350px;
  height:350px;
  background:white;
  z-index:99;
  border-radius:50%;
  padding:100px;
  transition: all 0.1s ease-in;
}


.ingame-context-menu.opening {
   transform: scale(0.4);
}


.ingame-context-menu.opened {
   transform:none;
}

.ingame-context-menu .icon-close {
  position:absolute;
  bottom: 122px;
  left: 113px;
  width: 108px;
  height: 108px;
  background:url(/img/actions/accept_c1.ico) 0 0 no-repeat;
  background-size:contain;
  cursor:pointer;

}

.ingame-context-menu .icon {
  position:absolute;
  width:40px;
  height:40px;
  border: solid 1px gold;
  background:#fff;
  cursor:pointer;
}

.ingame-context-menu .icon.pirate {
  background: url(/img/avatar.jpg) 0 0 no-repeat;
  background-size: contain;
}


.ingame-context-menu .icon.pirate.char-1 {
  background: url(/s_jckl/game-img/pirates/red-1-head.png) 0 0 no-repeat;
  background-size: contain;
}

.ingame-context-menu .icon.pirate.char-2 {
  background: url(/s_jckl/game-img/pirates/red-2-head.png) 0 0 no-repeat;
  background-size: contain;
}

.ingame-context-menu .icon.pirate.char-3 {
  background: url(/s_jckl/game-img/pirates/red-3-head.png) 0 0 no-repeat;
  background-size: contain;
}

.ingame-context-menu .icon.pirate.chunga {
  background: url(/s_jckl/game-img/pirates/chunga-head.png) 0 0 no-repeat;
  background-size: contain;
}

.ingame-context-menu .icon.pirate.priest {
  background: url(/s_jckl/game-img/pirates/preacher-head.png) 0 0 no-repeat;
  background-size: contain;
}

.ingame-context-menu .icon.pirate.steps {
  background: url(/S_JCKL/game-img/steps.svg) 0 0 no-repeat;
  background-size: contain;
}


 .ingame-context-menu .icon.coin {
  background: url(/img/oldcoin.png) 0 0 no-repeat;
  background-size: contain;
}

.ingame-context-menu .icon.active {
  box-shadow: 0px 0px 3px 1px rgb(0 198 218);
}

/**/
.player {
  display:inline-flex;
  align-items:unset;
  margin:0px 10px;
  min-width:310px;
  background:#FFF;
  border-radius:10px;
  padding:5px;
  position:relative;
  box-shadow: 0px 23px 28px -16px rgb(188 193 207 / 45%);
  transition: all 0.2s ease-out;
}

.player.active {
  box-shadow: inset 0px -1px 4px rgb(0 198 218);
  box-shadow: inset 0px -1px 4px rgb(208 190 7);
}

.player > .avatar {
  position:relative;
  border-radius:8px;
  overflow:hidden;
  width:50px;
  height:50px;
  margin-right:10px;
  box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8;
}
.player > .avatar > img {
  width:100%;
  height:auto;
}

.player > .avatar > .timer {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  color:#fff;
  text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:35px;
  visibility:hidden;
  opacity:0;
}

.player.active > .avatar > .timer {
  visibility:visible;
  opacity:1;
}

.player > .content {
  width:calc(100% - 60px);
}

.player > .content > .username {
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
}

.player > .content > .username::after {
  display:inline-block;
  content:'';
  width:16px;
  height:16px;
  background:url(/img/on.png) 0 0 no-repeat;
  margin-left:2px;
}


.player > .content > .main {
  display:flex;
  margin-top:5px;
}


.player > .content > .main > .chars {
  display:flex;
  align-items:center;
}

.player > .content > .main > .chars > .pirates {
  display:flex;
  align-items:center;
}

.player > .content > .main > .chars .pirate {
  display:block;
  margin-right:5px;
  width: 36px;
  height: 29px;
  background:url(/img/avatar.jpg) 0 0 no-repeat;
  background-size:contain;
  position: relative;
}


.player > .content > .main > .chars .pirate.pirate-1 {
  background:url(/s_jckl/game-img/pirates/red-1-head.png) 0 0 no-repeat;
  background-size:contain;
}

.player > .content > .main > .chars .pirate.pirate-2 {
  width: 25px;
  background:url(/s_jckl/game-img/pirates/red-2-head.png) 0 0 no-repeat;
  background-size:contain;
}


.player > .content > .main > .chars .pirate.pirate-3 {
  width: 28px;
  background:url(/s_jckl/game-img/pirates/red-3-head.png) 0 0 no-repeat;
  background-size:contain;
}

.player > .content > .main > .chars .pirate.pirate-4 {
  width: 28px;
  height:28px;
  background:url(/s_jckl/game-img/pirate_head.png) 0 0 no-repeat;
  background-size:contain;
}

.player > .content > .main > .chars .pirate.pirate-5 {
  width: 28px;
  height:28px;
  background:url(/s_jckl/game-img/pirate_head.png) 0 0 no-repeat;
  background-size:contain;
}

.player > .content > .main > .chars .pirate.pirate-1.blue {
  background:url(/s_jckl/game-img/pirates/blue-1-head.png) 0 0 no-repeat;
  background-size:contain;
}

.player > .content > .main > .chars .pirate.pirate-2.blue {
  background:url(/s_jckl/game-img/pirates/blue-2-head.png) 0 0 no-repeat;
  background-size:contain;
}

.player > .content > .main > .chars .pirate.pirate-3.blue {
  background:url(/s_jckl/game-img/pirates/blue-3-head.png) 0 0 no-repeat;
  background-size:contain;
}


.player > .content > .main > .chars .pirate.chunga {
  width: 26px;
  background:url(/s_jckl/game-img/pirates/chunga-head.png) 0 0 no-repeat;
  background-size:contain;
  visibility: hidden;
}

.player > .content > .main > .chars .pirate.chunga.visible {
  visibility: visible;
}

.player > .content > .main > .chars .pirate.priest {
  width: 40px;
  background:url(/s_jckl/game-img/pirates/preacher-head.png) 0 0 no-repeat;
}




.player > .content > .main > .chars .pirate.active::after {
   content:'';
   position: absolute;
   left:0px;
   top:0px;
   width:100%;
   height: 100%;
   border-radius: 40%;
   box-shadow: 0px 0px 3px 1px rgb(0 198 218);
}



.player > .content > .main > .chars .pirate.dead{
    user-select: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}


.player > .content > .main > .chars .pirate.dead::after
{
    content:'';
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 100%;
    box-shadow: none;
    background: url(/img/Actions/Cancel_24x24.ico) 50% 50% no-repeat;
    
}

.player > .content > .main > .items {
  display:flex;
  align-items:center;
  margin-left:5px;
}

.player > .content > .main > .items > .coins {
  background:url(/img/coins.png) 0 0 no-repeat;
  background-size: contain;
  height:25px;
  padding-left:30px;
  margin:0px 5px;
  color:gold;
  font-size: 20px;
  text-shadow:1px 1px 1px #000;
}


.player > .content > .main > .items > .rum {
  color: gold;
  font-size: 20px;
  text-shadow: 1px 1px 1px #000;
  position: relative;
  /* line-height: 13px; */
  height: 25px;
  padding-left: 30px;
  margin:0px 5px;
}

.player > .content > .main > .items > .rum::before{
  content:'';
  display:block;
  width:40px;
  height:45px;
  background: url(/s_jckl/game-img/rum.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top:-10px;
  left:0;
  transition: linear 1s;
}


.player > .content > .main > .items > .rum.usable::before {
  animation: rumattention 2s infinite;

}

.player > .content > .main > .items > .rum.active::before {
  animation: none;
  box-shadow: 0px 0px 3px 1px rgb(0 198 218);
}

.popupBackDrop {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: rgb(103 133 163 / 60%);
    background: rgba(0,0,0,0.32);
    z-index: 999999;
    overflow:hidden;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: opacity .4s cubic-bezier(.25,.8,.25,1);
    transition: opacity .4s cubic-bezier(.25,.8,.25,1);
}

.popupBackDrop.animated {
    opacity: 0;
}

.popupBackDrop.animated.shown {
    opacity: 1;
    background: rgba(0,0,0,0.65);
}

.popupWindow {
    min-width:250px;
    min-height:200px;
    background:#FFF;
    color:black;
    box-shadow: 0 4px 17px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.16), 0 0 1px 0 rgba(0,0,0,.16);
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 4px 0 rgba(0,0,0,.2);
    border-radius:20px;
    box-sizing:border-box;
    position:absolute;
    font-family: inherit;
}

.popupWindow.modal-type {
    min-width:initial;
    min-height:initial;
    width:90%;
    height:90%;
    position:absolute;
    z-index: 999999;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.16), 0 0 1px 0 rgba(0,0,0,.16);
}

.popupWindow.animated {
    transition: all .4s cubic-bezier(.25,.8,.25,1);
}

.popupWindow.modal-type.confirm-type {
    width:initial;
    height:initial;
    min-width:400px;
}

.popupWindow > .popup-container {
    position:relative;
    width:100%;
    height:100%;
    overflow: hidden;
    background: #ff9b00;
    background:#fff;
    border-radius: 20px;
    font-size: 14px;
}

.popupWindow > .popup-container > div:last-child{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.popupWindow > .popup-container > .head {
    height:48px;
    width:100%;
    background: #ff9b00;
    background:#fff;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    font-family: inherit;
    line-height:1;
    display:flex;
    flex-direction:row;
    padding:10px 20px 10px 32px;
    font-weight:bold;

}
.popupWindow > .popup-container > .head > span {    
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    display:block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width:100%;
    color:#3977C8;
    margin: 0;
}

.popupWindow > .popup-container > .head.move {
    cursor:move;
}

.popupWindow > .popup-container > .head > button.close {
    -webkit-box-align: baseline;
    align-items: baseline;
    border-width: 0px;
    box-sizing: border-box;
    display: inline-flex;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border-radius: 3px;
    cursor: pointer;
    /*height: 2.28571em;
    line-height: 2.28571em;*/
    transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
    vertical-align: middle;
    width: auto;
    outline: none !important;
    color: #000 !important;
    text-shadow:none!important;
    font-size:33px;
    margin-top: -11px;
    margin-right: 0px
}

.popupWindow > .popup-container > .head > button.close > span {
    display:none;
}

.popupWindow > .popup-container > .head > button.close {
    width:18px;
    height:18px;
    background:url(/s_jckl/game-img/close.svg) 0 0 no-repeat;
    margin-top: 0;
    opacity:1;
    filter: invert(48%) sepia(11%) saturate(3148%) hue-rotate(174deg) brightness(88%) contrast(88%);
}

.popupWindow > .popup-container > .head > button.close:hover {
    opacity:1;
}

.popupWindow > .popup-container > .content.nice-scroll {
    position: relative;
    width:100%;
    padding:10px 20px;
    height:calc(100% - 82px);
    overflow:auto;
    padding:15px 20px;
    position:relative;

}


.popupWindow > .popup-container > .footer {
    background: #ff9b00;
    background:#fff;
    height:50px;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    padding:10px 20px 10px 19px;
    position:absolute;
    left:0;
    bottom:0;
}


.popup-buttons{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin:10px 0;
  gap:10px;
}

.button{
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  padding:10px 20px;
  text-align: center;
  background-color: #ff9b00;
  color:white;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: .2s linear;
  -o-transition: .2s linear;
  transition: .2s linear;
}

.button:hover{
  background-color: #ffb645;
}
    
.shake
{
    -webkit-animation: shake 0.2s infinite;
    -moz-animation: shake 0.2s infinite;
    -o-animation: shake 0.2s infinite;
    animation: shake 0.2s infinite;
}
@-webkit-keyframes shake {
    0% {margin-top:0px;}
    10% {margin-top:3px;}
    20% {margin-top:0px;}
    30% {margin-top:-3px;}
    40% {margin-top:0px;}
    50% {margin-top:3px;}
    60% {margin-top:0px;}
    70% {margin-top:-3px;}
    80% {margin-top:0px;}
    90% {margin-top:3px;}
    100% {margin-top:0px;}
}
@-moz-keyframes shake {
    0% {margin-top:0px;}
    10% {margin-top:3px;}
    20% {margin-top:0px;}
    30% {margin-top:-3px;}
    40% {margin-top:0px;}
    50% {margin-top:3px;}
    60% {margin-top:0px;}
    70% {margin-top:-3px;}
    80% {margin-top:0px;}
    90% {margin-top:3px;}
    100% {margin-top:0px;}
}

@-o-keyframes shake {
    0% {margin-top:0px;}
    10% {margin-top:3px;}
    20% {margin-top:0px;}
    30% {margin-top:-3px;}
    40% {margin-top:0px;}
    50% {margin-top:3px;}
    60% {margin-top:0px;}
    70% {margin-top:-3px;}
    80% {margin-top:0px;}
    90% {margin-top:3px;}
    100% {margin-top:0px;}
}
@keyframes shake {
    0% {margin-top:0px;}
    10% {margin-top:3px;}
    20% {margin-top:0px;}
    30% {margin-top:-3px;}
    40% {margin-top:0px;}
    50% {margin-top:3px;}
    60% {margin-top:0px;}
    70% {margin-top:-3px;}
    80% {margin-top:0px;}
    90% {margin-top:3px;}
    100% {margin-top:0px;}
}



@keyframes rumrun {
    0% {margin-top:0px; opacity: 1;}
    100% {margin-top:-70px; opacity: 0;}
}


@keyframes rumturn{
  0% {transform:rotate(0deg);}
  50% {transform:rotate(-90deg);}
  100% {transform:rotate(0deg);}

}

@keyframes rumattention {
  0% {
      transform:scale(1);
      top:-10px;
  }

  50% {
     transform:scale(1.2);
     top:-15px;
  }


  100% {
      transform:scale(0.9);
      top:-10px;
  }
}



@media (max-width: 768px)
{ 
    #top-line .right-buttons {
        position: relative
    }

    #top-line .log-info 
    {
        position: relative;
    }

    #top-line .player {
        min-width: 350px;
    }

}