@font-face {
    font-family: 'allertaStencil';
    src: local('☺'), url(AllertaStencil-Regular.ttf) format('truetype');
}
/*@font-face {
    font-family: 'Kaushan Script';
    src: local('☺'), url(KaushanScript-Regular.ttf) format('truetype');
}*/
@font-face {
    font-family: 'Cartoon Shout';
    src: local('☺'), url(BD_Cartoon_Shout.ttf) format('truetype');
}
/*@font-face {
    font-family: 'Komika';
    src: local('☺'), url(KOMTIT.ttf) format('truetype');
}*/

/*http://www.w3schools.com/css/css3_fonts.asp*/

html {
    -webkit-user-select: none;
}
body {
    font-family: 'allertaStencil', sans-serif !important;
    margin: 0;
    /*max-width: 500px;*/
    background-color: #333;
    overflow: hidden;


    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}
body * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*HIDES THE BLINKING EFFECT ON BUTTONS*/
}

#pageone {
    margin: auto;
    background-color: #897953;/*MATCH WITH levelBackgroundFade*/
}

/*JQUERY MOBILE OVERRIDES*/
.ui-page.ui-page-theme-a.ui-page-active {
    /*17 JAN 2024 COMMENTED OUT BELOW*/
/*    min-height: 0 !important;*/
    
    overflow: hidden;
}
.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
    display: none !important;
}
/*END OF JQUERY MOBILE OVERRIDES*/

/*COPIED FROM INDEX.CSS*/

/*END OF COPIED FROM INDEX.CSS*/

.app {
    font-family: 'allertaStencil', sans-serif !important;
}


.curtain {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 50;
    /*background: linear-gradient(-45deg, hsla(0, 100%, 70%, 1) 50%, hsla(190, 80%, 40%, 1) 50%);*/
/*    background: white;*/
    background:linear-gradient(#e5f6ff, #55a8d2 40%, #3882a7 100%);
}
.loadingBanner {
    margin: 200px auto auto auto;
    width: 100%;
    height:200px;
    color:white;
    background-color:hsla(10, 95%, 35%, 0.9);
    float:left;
}
.loadingText {
    font-size: 48px;
    width: 250px;
    margin: 65px auto auto auto;
}

.cookiePolicy {
    z-index: 49;
    position: absolute;
    bottom: 0;
    background-color: white;
    width: 100%;
    padding: 20px;
    box-shadow: 0px -10px 30px 0px hsl(0deg 0% 0% / 50%);
}
.cookiePolicy p {
    width: calc(100% - 150px);
    float: left;
}
.cookieButtonGroup {
    float: left;
    width: 150px;
}
.cookieButton {
    color: white;
    font-size: 18px;
    background-color: hsl(0 0% 20% / 1);
    border-radius: 70px;
    padding: 10px 20px;
    display: block;
    clear: both;
    width: 130px;
    text-align: center;
    float: right;
    margin-bottom: 20px;
    cursor: pointer;
}
.cookieButton:hover {
    background-color: hsl(0 0% 30% / 1);
}

.mainMenu, .levelSelect, .levelSelectMultiplayer, .info, .reset, .instructions, .pauseOverlay, .endGameWave, .endGameBanner {
    overflow: hidden;
}

#gameplay {
    position: absolute;
    left: 2px;
    width: calc(100% - 2px);
    display: none;
}
#board {
    width: 100%;
    position: relative;
    background: url(../img/gridBackground.png);
}
.boardSquare {
    float: left;
    position: absolute;
    background-image:url(../img/gridBackground.png);
    background-size:contain;
}

#pieces {
    /*width: 100%;*/
}

.player {
    position: absolute;
    background-size: contain;
    z-index: 13;
}

@keyframes winGameAnimation {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.player.winGame {
    z-index: 20 !important;
    animation-name: winGameAnimation;
    animation-delay: 1.5s;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
}

@keyframes pieceTurn {
    from {background-color: hsla(0,100%,100%,0.1);}
    to {background-color: hsla(0,100%,100%,0.5);}
}
.myTurn {
    border-radius: 100%;
    animation-name: pieceTurn;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes pieceTurnHover {
    from {background-color: hsla(0,100%,100%,0.8);}
    to {background-color: hsla(0,100%,100%,1);}
}
.player.myTurn:hover {
    border-radius: 100%;
    animation-name: pieceTurnHover;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    box-shadow: 0 0 10px 10px white;
}

@keyframes pieceThinking {
    from {background-color: hsla(0,100%,50%,0);}
    to {background-color: hsla(0,100%,50%,0.5);}
}
.thinking {
    border-radius: 100%;
    /*border:5px solid blue;*/
    background-color: red;
    animation-name: pieceThinking;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes pieceThinkingTarget {
    from {background-color: hsla(200,100%,50%,0);}
    to {background-color: hsla(200,100%,50%,0.5);}
}
.thinkingTarget {
    border-radius: 100%;
    /*border:5px solid red;*/
    background-color:blue;
    animation-name: pieceThinkingTarget;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes weaponFlip {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.killWeaponFlip {
    animation-name: weaponFlip;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

.pieceGraphic {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat !important;
    background-size:contain;
    position: absolute;
}

.player .pieceGraphic {
    cursor: pointer;
}
/*.player .pieceGraphic:hover {
    background-color: hsla(0, 82%, 33%,1);
}*/
    .player1.rock .pieceGraphic {background-image:url(../img/Player1Rock.png);}
    .player1.scissors .pieceGraphic {background-image:url(../img/Player1Scissors.png);}
    .player1.paper .pieceGraphic {background-image:url(../img/Player1Paper.png);}

    .player1.rock.selected .pieceGraphic {background-image:url(../img/Player1RockWalk.gif);}
    .player1.scissors.selected .pieceGraphic {background-image:url(../img/Player1ScissorsWalk.gif);}
    .player1.paper.selected .pieceGraphic {background-image:url(../img/Player1PaperWalk.gif);}

    .player1.rock.throw .pieceGraphic {background-image:url(../img/Player1RockThrow.png);}
    .player1.scissors.throw .pieceGraphic {background-image:url(../img/Player1ScissorsThrow.png);}
    .player1.paper.throw .pieceGraphic {background-image:url(../img/Player1PaperThrow.png);}


    .player2.rock .pieceGraphic {background-image:url(../img/Player2Rock.png);}
    .player2.scissors .pieceGraphic {background-image:url(../img/Player2Scissors.png);}
    .player2.paper .pieceGraphic {background-image:url(../img/Player2Paper.png);}

    .player2.rock.selected .pieceGraphic {background-image:url(../img/Player2RockWalk.gif);}
    .player2.scissors.selected .pieceGraphic {background-image:url(../img/Player2ScissorsWalk.gif);}
    .player2.paper.selected .pieceGraphic {background-image:url(../img/Player2PaperWalk.gif);}

    .player2.rock.throw .pieceGraphic {background-image:url(../img/Player2RockThrow.png);}
    .player2.scissors.throw .pieceGraphic {background-image:url(../img/Player2ScissorsThrow.png);}
    .player2.paper.throw .pieceGraphic {background-image:url(../img/Player2PaperThrow.png);}


    .player3.rock .pieceGraphic {background-image:url(../img/Player3Rock.png);}
    .player3.scissors .pieceGraphic {background-image:url(../img/Player3Scissors.png);}
    .player3.paper .pieceGraphic {background-image:url(../img/Player3Paper.png);}

    .player3.rock.selected .pieceGraphic {background-image:url(../img/Player3RockWalk.gif);}
    .player3.scissors.selected .pieceGraphic {background-image:url(../img/Player3ScissorsWalk.gif);}
    .player3.paper.selected .pieceGraphic {background-image:url(../img/Player3PaperWalk.gif);}

    .player3.rock.throw .pieceGraphic {background-image:url(../img/Player3RockThrow.png);}
    .player3.scissors.throw .pieceGraphic {background-image:url(../img/Player3ScissorsThrow.png);}
    .player3.paper.throw .pieceGraphic {background-image:url(../img/Player3PaperThrow.png);}


    .player4.rock .pieceGraphic {background-image:url(../img/Player4Rock.png);}
    .player4.scissors .pieceGraphic {background-image:url(../img/Player4Scissors.png);}
    .player4.paper .pieceGraphic {background-image:url(../img/Player4Paper.png);}

    .player4.rock.selected .pieceGraphic {background-image:url(../img/Player4RockWalk.gif);}
    .player4.scissors.selected .pieceGraphic {background-image:url(../img/Player4ScissorsWalk.gif);}
    .player4.paper.selected .pieceGraphic {background-image:url(../img/Player4PaperWalk.gif);}

    .player4.rock.throw .pieceGraphic {background-image:url(../img/Player4RockThrow.png);}
    .player4.scissors.throw .pieceGraphic {background-image:url(../img/Player4ScissorsThrow.png);}
    .player4.paper.throw .pieceGraphic {background-image:url(../img/Player4PaperThrow.png);}


    @keyframes starFishEarned {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
    }
    .player.starFish .pieceGraphic {
        background-image:url(../img/starFull.png);
        animation-name: starFishEarned;
        animation-duration: 1s;
        animation-timing-function: ease-out;
    }

.computer {position: absolute; background-size:contain;}
    .computer2.rock .pieceGraphic {background-image:url(../img/Player2Rock.png);}
    .computer2.scissors .pieceGraphic {background-image:url(../img/Player2Scissors.png);}
    .computer2.paper .pieceGraphic {background-image:url(../img/Player2Paper.png);}

    .computer2.rock.selected .pieceGraphic {background-image:url(../img/Player2RockWalk.gif);}
    .computer2.scissors.selected .pieceGraphic {background-image:url(../img/Player2ScissorsWalk.gif);}
    .computer2.paper.selected .pieceGraphic {background-image:url(../img/Player2PaperWalk.gif);}

    .computer2.rock.throw .pieceGraphic {background-image:url(../img/Player2RockThrow.png);}
    .computer2.scissors.throw .pieceGraphic {background-image:url(../img/Player2ScissorsThrow.png);}
    .computer2.paper.throw .pieceGraphic {background-image:url(../img/Player2PaperThrow.png);}


    .computer3.rock .pieceGraphic {background-image:url(../img/Player3Rock.png);}
    .computer3.scissors .pieceGraphic {background-image:url(../img/Player3Scissors.png);}
    .computer3.paper .pieceGraphic {background-image:url(../img/Player3Paper.png);}

    .computer3.rock.selected .pieceGraphic {background-image:url(../img/Player3RockWalk.gif);}
    .computer3.scissors.selected .pieceGraphic {background-image:url(../img/Player3ScissorsWalk.gif);}
    .computer3.paper.selected .pieceGraphic {background-image:url(../img/Player3PaperWalk.gif);}

    .computer3.rock.throw .pieceGraphic {background-image:url(../img/Player3RockThrow.png);}
    .computer3.scissors.throw .pieceGraphic {background-image:url(../img/Player3ScissorsThrow.png);}
    .computer3.paper.throw .pieceGraphic {background-image:url(../img/Player3PaperThrow.png);}


    .computer4.rock .pieceGraphic {background-image:url(../img/Player4Rock.png);}
    .computer4.scissors .pieceGraphic {background-image:url(../img/Player4Scissors.png);}
    .computer4.paper .pieceGraphic {background-image:url(../img/Player4Paper.png);}

    .computer4.rock.selected .pieceGraphic {background-image:url(../img/Player4RockWalk.gif);}
    .computer4.scissors.selected .pieceGraphic {background-image:url(../img/Player4ScissorsWalk.gif);}
    .computer4.paper.selected .pieceGraphic {background-image:url(../img/Player4PaperWalk.gif);}

    .computer4.rock.throw .pieceGraphic {background-image:url(../img/Player4RockThrow.png);}
    .computer4.scissors.throw .pieceGraphic {background-image:url(../img/Player4ScissorsThrow.png);}
    .computer4.paper.throw .pieceGraphic {background-image:url(../img/Player4PaperThrow.png);}



.computer2.boss.rock .pieceGraphic {background-image:url(../img/boss2Rock.png);}
.computer2.boss.scissors .pieceGraphic {background-image:url(../img/boss2Scissors.png);}
.computer2.boss.paper .pieceGraphic {background-image:url(../img/boss2Paper.png);}
.computer2.selected.boss.rock .pieceGraphic {background-image:url(../img/boss2Rock.png);}
.computer2.selected.boss.scissors .pieceGraphic {background-image:url(../img/boss2Scissors.png);}
.computer2.selected.boss.paper .pieceGraphic {background-image:url(../img/boss2Paper.png);}

.computer3.boss.rock .pieceGraphic {background-image:url(../img/boss3Rock.png);}
.computer3.boss.scissors .pieceGraphic {background-image:url(../img/boss3Scissors.png);}
.computer3.boss.paper .pieceGraphic {background-image:url(../img/boss3Paper.png);}
.computer3.selected.boss.rock .pieceGraphic {background-image:url(../img/boss3Rock.png);}
.computer3.selected.boss.scissors .pieceGraphic {background-image:url(../img/boss3Scissors.png);}
.computer3.selected.boss.paper .pieceGraphic {background-image:url(../img/boss3Paper.png);}

.computer4.boss.rock .pieceGraphic {background-image:url(../img/boss4Rock.png);}
.computer4.boss.scissors .pieceGraphic {background-image:url(../img/boss4Scissors.png);}
.computer4.boss.paper .pieceGraphic {background-image:url(../img/boss4Paper.png);}
.computer4.selected.boss.rock .pieceGraphic {background-image:url(../img/boss4Rock.png);}
.computer4.selected.boss.scissors .pieceGraphic {background-image:url(../img/boss4Scissors.png);}
.computer4.selected.boss.paper .pieceGraphic {background-image:url(../img/boss4Paper.png);}

.bossLeg {
    /*background-image: url(../img/bossLeg.png);*/
    position: absolute;
    top: -100%;
    /*background-size: contain;*/
    /*background-size: 100% 100%;*/
    background-size: 100%;
    /*z-index: 18;*/
}
.computer2 .bossLeg {
    background-image: url(../img/bossLeg2.png);
}
.computer3 .bossLeg {
    background-image: url(../img/bossLeg3.png);
}
.computer4 .bossLeg {
    background-image: url(../img/bossLeg4.png);
}



.bossLegAttach {
    position: absolute;
    background-size: 100% 100%;
    /*z-index: 18;*/
}
.computer2 .bossLegAttach {
    background-image: url(../img/bossLegAttach2.png);
}
.computer3 .bossLegAttach {
    background-image: url(../img/bossLegAttach3.png);
}
.computer4 .bossLegAttach {
    background-image: url(../img/bossLegAttach4.png);
}

.boss .decision {
    display: none;
}

.flag {
    /*background-color: black;*/
    width:100%;
    height: 50px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}
#player1Flag {
    background-image: url(../img/Player1Flag.gif);
}
#player2Flag {
    background-image: url(../img/Player2Flag.gif);
}
#player3Flag {
    background-image: url(../img/Player3Flag.gif);
}
#player4Flag {
    background-image: url(../img/Player4Flag.gif);
}
#computer2Flag {
    background-image: url(../img/Player2Flag.gif);
}
#computer3Flag {
    background-image: url(../img/Player3Flag.gif);
}
#computer4Flag {
    background-image: url(../img/Player4Flag.gif);
}

@keyframes thoughtBubble {
    0% {opacity:0;}
    100% {opacity:1;}
}
.decision {
    background-image: url(../img/thoughtBubble.png);
    background-size: contain;
    background-repeat: no-repeat;
    overflow: visible;
    position: relative;
    top: -47%;
    left: -17%;
    z-index: 23;
/*    font-size: 3vw;*/
    font-size: 20px;
    font-family: 'Cartoon Shout';
    animation-name: thoughtBubble;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    pointer-events: none;
}
.decision > div {
    background-size: contain;
    background-repeat: no-repeat;
    width: 70%;
    height: 70%;
    position: absolute;
}
.decisionRock {
    background-image: url(../img/KillRock.png);
    top: 19%;
    left: 11%;
}
.decisionPaper {
    background-image: url(../img/KillPaper.png);
    top: 21%;
    left: 4%;
}
.decisionScissors {
    background-image: url(../img/KillScissors.png);
    top: 17%;
    left: 7%;
    transform: rotate(15deg);
}
.decisionFlag {
    background-image: url(../img/killFlag.png);
    left: 16%;
    top: 15%;
}
.decisionRandom {
/*    font-size: 4vw;*/
    font-size: 40px;
    left: 34%;
    top: 30%;
}
.decisionSkip {
/*    font-size: 2.7vw;*/
    font-size: 27px;
    left: 12%;
    top: 36%;
}


/*.endGameStars:after {
    content: '';
    width: 100%;
    background: hsla(10, 95%, 35%, 0.9);
    position: absolute;
}*/

.endGameBanner.player1 .endGameStars {
    background-color: hsla(10, 95%, 35%, 0.9);
}
.endGameBanner.player2 .endGameStars, .endGameBanner.computer2 .endGameStars {
    background-color: hsla(199, 82%, 33%, 0.9);
}
.endGameBanner.player3 .endGameStars, .endGameBanner.computer3 .endGameStars {
    background-color: hsla(90, 82%, 33%, 0.9);
}
.endGameBanner.player4 .endGameStars, .endGameBanner.computer4 .endGameStars {
    background-color: hsla(280, 60%, 50%, 0.9);
}

.endGameStars {
    width: 100%;
    /*background: hsla(10, 95%, 35%, 0.9);*/
    position: absolute;
}
.endGameStars > div {
    top: 10px !important;
    position: absolute;
    border-radius: 100%;
    background-color: hsla(0,0%,0%,0.5);
    /*background-color: hsla(10, 95%, 35%, 0.9);*/
    /*border: 5px solid white;*/
    box-shadow: 0px 7px 0px hsla(0,0%,0%,0.5) inset;
    z-index: 7;
}

@keyframes moveTargetPulsePlayer1 {
    from {background-color: hsla(0, 82%, 33%,0);}
    to {background-color: hsla(0, 82%, 33%,0.5);}
}
@keyframes moveTargetPulsePlayer2 {
    from {background-color: hsla(199, 82%, 33%,0);}
    to {background-color: hsla(199, 82%, 33%,0.5);}
}
@keyframes moveTargetPulsePlayer3 {
    from {background-color: hsla(90, 82%, 33%,0);}
    to {background-color: hsla(90, 82%, 33%,0.5);}
}
@keyframes moveTargetPulsePlayer4 {
    from {background-color: hsla(280, 60%, 50%,0);}
    to {background-color: hsla(280, 60%, 50%,0.5);}
}
.moveTarget {
    /*background-color: hsla(199,82%,33%,0.5);*/
    position: absolute;
    /*transition: width 2s;*/
    animation-name: moveTargetPulsePlayer1;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    overflow: hidden;/*PREVENTS THE HORIZONTAL SCROLL BAR FROM APPEARING WHEN PIECE IS IN 2ND TO LAST SPOT FROM THE EAST BORDER*/
    z-index: 16;
}
.moveTargetplayer1 {
    animation-name: moveTargetPulsePlayer1;
}
.moveTargetplayer2 {    
    animation-name: moveTargetPulsePlayer2;
}
.moveTargetplayer3 {    
    animation-name: moveTargetPulsePlayer3;
}
.moveTargetplayer4 {
    animation-name: moveTargetPulsePlayer4;
}

.moveTarget:active {
/*    box-shadow: 0px 0px 7vw 2vw white inset;*/
    box-shadow: 0px 0px 10px 5px white inset;
}
.moveTarget:hover{
    box-shadow: 0px 0px 0px 5px white inset;
    cursor: pointer;
}

.moveTargetDroppable {
    position: absolute;
    z-index: 8;
}
/*TEMPORARY*/
/*.player1Droppable {
    background-color: hsla(0, 82%, 33%,0.1);
}
.player2Droppable {
    background-color: hsla(199, 82%, 33%,0.1);
}
.player3Droppable {
    background-color: hsla(90, 100%, 40%,0.1);
}
.player4Droppable {
    background-color: hsla(90, 82%, 33%,0.1);
}*/
/*END OF TEMPORARY*/

.moveTargetDroppable.ui-droppable-active {
    animation-name: moveTargetPulsePlayer1;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.player1Droppable.ui-droppable-active {
    animation-name: moveTargetPulsePlayer1;
}
.player2Droppable.ui-droppable-active {
    animation-name: moveTargetPulsePlayer2;
}
.player3Droppable.ui-droppable-active {
    animation-name: moveTargetPulsePlayer3;
}
.player4Droppable.ui-droppable-active {
    animation-name: moveTargetPulsePlayer4;
}

.moveTargetDroppable.ui-droppable-hover {
    /*border:1vw solid white;
    box-shadow: 0px 0px 2vw white inset;*/
    border:5px solid white;
    box-shadow: 0px 0px 10px white inset;
}

/*.triangle {
    position: relative;
    margin: auto;
    border: 1px solid transparent;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes triangleNorth {
    from {bottom: 0%;}
    to {bottom: 25%;}
}
.moveTarget#North .triangle {
    border-bottom: 1px solid hsla(0,0%,100%,0.3);
    animation-name: triangleNorth;
}

@keyframes triangleSouth {
    from {top: 0%;}
    to {top: 25%;}
}
.moveTarget#South .triangle {
    border-top: 1px solid hsla(0,0%,100%,0.3);
    animation-name: triangleSouth;
}

@keyframes triangleEast {
    from {left: 0%;}
    to {left: 25%;}
}
.moveTarget#East .triangle {
    border-left: 1px solid hsla(0,0%,100%,0.3);
    animation-name: triangleEast;
}

@keyframes triangleWest {
    from {right: 0%;}
    to {right: 25%;}
}
.moveTarget#West .triangle {
    border-right: 1px solid hsla(0,0%,100%,0.3);
    animation-name: triangleWest;
}*/

.wall {
    background-image:url(../img/obstacle1.png);
    background-size:contain;
    width: 50px;
    height: 50px;
    position: absolute;
}
#wallTemplate {
    display: none;
    top: 168px;
    left: 68px;
}
.dead {
    /*opacity: .5;*/
    /*width: 40px !important;*/
}
 
/*.iphoneStatusBar {
    height: 22px;
    width: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    z-index: 40;
    box-shadow: 0px 0px 10px hsla(0,0%,0%,0.5);
}*/
.sky {
    /*background-image:url(../img/sky.png);
    background-size:contain;
    background-repeat: no-repeat;
    width: 100%;*/
    display: none;
}
.sky img {
    width: 100%;
    height: 100%;
}
.waves {
    width: 100%;
    display: none;
    position: relative;
    /*margin-top: -1px;*/
}



@keyframes wavesAnimation {
    0%   {top: -100%; opacity: 1; z-index: 5;}
    50%  {top: 0%; opacity: 1; z-index: 5;}
    51%  {top: 0%; opacity: 1; z-index: 4;}
    90%  {top: -10%; opacity: 0; z-index: 4;}
    100%  {top: -100%; opacity: 0; z-index: 4;}
}
.waveGraphic, .waveGraphic2 {
    background-size:100% 100%;
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    z-index: 4;
    animation-name: wavesAnimation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
.waveGraphic {
    background-image:url(../img/waves1.png);
}
.waveGraphic2 {
    background-image:url(../img/waves2.png);
    animation-delay: 5s;
}

.commanderCrab {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 22;
    /*background-image: url(../img/octopus2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: -115%;
    background-position-y: 100%;*/
    display: none;
}
.commanderCrab img {
    /*float: left;
    width: 19%;
    left: 1%;
    position: absolute;
    bottom: 0;*/
    float: left;
    width: 100%;
    left: -37%;
    position: absolute;
    /*bottom: -13%;*/
}
/*.commanderCrab.bossBattle {
    background-position-x: 50%;
}*/
.commanderCrab.bossBattle img {
    left: 0%;
}
.turnTextLeft, .turnTextRight {
    text-align: left;
    background-color: white;
/*17 JAN 2024 CHANGED THE*/
    /*border: 0.4vw solid #330800;
    font-size: 2.7vw;
    padding: 1.1vw 1vw 0.5vw 1.5vw;
    border-radius: 2vw;*/
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #330800;
    font-size: 16px;
/*end of 17 JAN 2024*/
    position: absolute;
    left: 24%;
    margin-right: 10px;
    /*box-shadow: 2px 3px 2px hsla(0,0%,0%,0.5);*/
    font-family: Cartoon Shout;
    line-height: 1.4;
}
.turnTextRight, .turnTextRightTail {
    display: none;
}

/*.turnTextLeft:before {
    content: '';
    border-top: 30px solid white;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    left: 9px;
    top: 40px;
}*/
/*.turnTextLeft:before {
    content: url(../img/textBalloonTail.png);
}*/
.turnTextLeft:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 9px solid black;
    border-right: 9px solid transparent;
    border-top: 9px solid black;
    border-bottom: 10px solid transparent;
    left: 9px;
    bottom: -19px;
}
.turnTextLeft:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid white;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    border-bottom: 10px solid transparent;
    left: 11px;
    bottom: -13px;
}
.turnTextLeftTail, .turnTextRightTail {
/*    background-image: url(../img/textBalloonTail.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    
/*17 JAN 2024 CHANGED THIS...*/
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 17% !important;
    /*width: 5vw;
    height: 5vw;
    position: absolute;
    bottom: 5.3vw !important;*/
/*END OF 17 JAN 2024*/
}
.turnTextLeftTail {
    left: 26%;
}

.commanderCrab.bossBattle .turnTextLeftTail {
    transform: scaleX(-1);
    left: 31%;
}
.commanderCrab.bossBattle .turnTextRightTail {
    right: 32%;
    display: block;
}

.commanderCrab.bossBattle .turnTextLeft, .commanderCrab.bossBattle .turnTextRight {
    position: absolute;
}
.commanderCrab.bossBattle .turnTextLeft {
    /*left: 10px;*/
    right: 60%;
    left: inherit;
    margin-left: 10px;
}
.commanderCrab.bossBattle .turnTextRight {
    left: 61%;
    margin-right: 10px;
    display: block;
}
.turnTextLeft#player1, .turnTextRight#player1 {
    color: hsla(10, 95%, 35%, 0.9);
    /*background-color: white;*/
}
.turnTextLeft#computer2, .turnTextLeft#player2, .turnTextRight#computer2 {
    color: hsla(199, 82%, 33%, 0.9);
    /*background-color: white;*/
}
.turnTextLeft#computer3, .turnTextLeft#player3, .turnTextRight#computer3 {
    color: hsla(90, 82%, 33%, 0.9);
    /*background-color: white;*/
}
.turnTextLeft#computer4, .turnTextLeft#player4, .turnTextRight#computer4 {
    color: hsla(280, 60%, 50%, 0.9);
    /*background-color: white;*/
}

.endGameWave {
    /*height: 100%;*/
    width: 100%;
    /*background: hsla(175, 37%, 52%,0.7);*/
    /*background: hsla(37, 28%, 26%, 0.5);*/
    position: absolute;
    z-index: 28;
    display: none;
}
.endGameWaveGraphic {
    background-image:url(../img/waveEndGame.png);
    background-size:contain;
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position-y: bottom;
}
.endGameWaveColor {
    background: linear-gradient(hsla(200, 90%, 65%, 0.7) 93%, hsla(200, 90%, 65%, 0) 95%);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom:0px;
}


.menuButton {
    text-align: center;
    position: relative;
    margin: auto;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    background-size: contain;
    text-transform: uppercase;
    font-size: 12px;
    float: left;
    background-color: hsla(10, 95%, 35%, 0.9);
    color: transparent;
    border-radius: 10px;
    border: 3px solid white;
    box-shadow: 0px 3px 0px hsla(0,0%,0%,0.4);
}
.menuButton:hover{
    cursor: pointer;
    background-color: hsl(10 90% 45% / 1) !important;
    top:-2px;
}
.menuButton:active {
    position: relative;
    top:2px;
/*    background-color: hsla(10, 50%, 60%, 1) !important;*/
    background-color: hsl(10 95% 30% / 1) !important;
}

.levelSelectBottomBar, .gameplayBottomBar, .instructionsBottomBar, .infoBottomBar, .resetBottomBar, .mainMenuBottomBar {
    width: 100%;
    height: 64px;
    bottom: 0;
    position: absolute;
    clear: both;
    background: hsla(0, 0%, 0%, 0.7);
    padding: 8px;
}
.levelSelectBottomBar .backButton {
    z-index: 35;
}
.levelSelectBottomBar .backButton:active {
    bottom: -2px;
}
.levelSelectText {
    color: white;
    text-align: center;
    font-size: 14px;
    position: relative;
    top: 16px;
    left: -25px;
    z-index: 34;
}
.totalStars {
    text-align: right;
    color: white;
    font-size: 16px;
    right: 8px;
    bottom: 21px;
    position: absolute;
}
.totalStars .starFull {
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    top: -13px;
    right: 16px;
    width: 32px;
    height: 32px;

    /*display: block;*/
}
.totalStarsText {
    color: #f2c230;
    position: relative;
    top: 17px;
    right: 9px;
}


.gameplayBottomBar > .menuButton {
    /*margin-left: 45px;*/
}
.selectLevelButton {
    background-image: url(../img/menuButtonPlay.png);
    font-size: 35px !important;
    padding: 10px 0px 20px 0px !important;
    height: 70px !important;
    text-align: center !important;
}
.playMultiplayerButton {
    font-size: 25px !important;
    padding: 15px 0px 20px 0px !important;
    height: 70px !important;
    text-align: center !important;
}
.instructionsButton {
    background-image: url(../img/menuButtonInstructions.png);
}
.settingsButton {
    background-image: url(../img/menuButtonSettings.png);
    /*margin-left: calc(50% - 38px);
    position: absolute;*/
    margin-left: calc(50% - 72px);
}
/*.settingsButton:active {
    position: absolute;
    top: 10px;
}*/





.infoButton {
    background-image: url(../img/menuButtonInfo.png);
    position: absolute;
    right: 20px;
    bottom: 8px;
}
.infoButton:active {
    position: absolute;
    bottom: 6px;
    top: initial;
}
.infoButton:hover {
    top: initial;
    bottom: 10px;
}

/*.musicButton {
    margin-left: calc(50% - 38px);
    position: absolute;
}
.musicButton.on {
    background-image: url(../img/menuButtonMusicOn.png);
}
.musicButton.off {
    background-image: url(../img/menuButtonMusicOff.png);
}
.musicButton:active {
    position: absolute;
    top: 10px;
}*/

.resetButton {
    background-image: url(../img/menuButtonReset.png);
    position: absolute;
    bottom: 80px;
    width: 240px;
    color: white;
    font-size: 18px;
    text-transform: capitalize;
    padding-top: 8px;
    left: calc(50% - 120px);
}
.resetButton:active {
    bottom: 78px;
    top: initial;
    position: absolute;
}
.resetButton:hover {
    bottom: 82px;
    top: initial;
    position: absolute;
}

.musicPowerButton, .soundFXPowerButton {
    width: 240px;
    color: white;
    font-size: 18px;
    text-transform: capitalize;
    padding-top: 8px;
    left: calc(50% - 120px);
}
.musicPowerButton {
    position: absolute;
    top: 180px;
}
.musicPowerButton:active {
    position: absolute;
    top: 182px;
}
.musicPowerButton:hover {
    position: absolute;
    top: 178px;
}

.soundFXPowerButton {
    position: absolute;
    top: 400px;
}
.soundFXPowerButton:active {
    position: absolute;
    top: 402px;
}
.soundFXPowerButton:hover {
    position: absolute;
    top: 398px;
}


.levelSelect, .levelSelectMultiplayer {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    /*background: linear-gradient(#b8dfdc, #57b3ab 40%, #162753 100%);*/
    background: linear-gradient(#e5f6ff, #55a8d2 40%, #3882a7 100%);
}

.settings {
    display: none;
    background: white;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-image: url(../img/sandBackground.png);
/*    background-size: 20vw;*/
    background-size: 128px;
    z-index: 38;
}
.volumeBar {
    width: 80%;
    position: relative;
    top: 40px;
    margin: auto auto 120px auto;
}
.volumeBar:after {
    border-bottom: 10px solid black;
    content: '';
    display: block;
    padding-top: 20px;
}


.volumeBar.disabled .volumeButton {
    display: none;
}
.volumeBar.disabled .volumeNotch,
.volumeBar.disabled .volumeTrack,
.volumeBar.disabled:after {
    opacity: 0.2;
}


/*#fxVolumeBar {
    border-top: 5px dashed white;
    padding-top: 30px;
}*/
.volumeText {
    font-size: 34px;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}
.volumeNotch {
    position: absolute;
    display: block;
    height: 50px;
    width: 50px;
    background: hsla(0, 0%, 0%, 0.01);
    margin-left: -25px;
    margin-top: 12px;
}
.volumeNotch:after {
    border-right: 5px solid black;
    content: '';
    margin-left: 23px;
    font-size: 19px;
}
.volumeButton {
    border-radius: 100%;
    /*margin-left: -24px;*/
}
.musicVolumeAmount, .fxVolumeAmount {
    text-align: center;
    font-size: 34px;
    display: none;
}
.volumeTrack {
    width: 100%;
    height: 48px;
    position: absolute;
}

.reset {
    display: none;
    background: white;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-image: url(../img/sandBackground.png);
/*    background-size: 20vw;*/
    background-size: 128px;
    color: #624e34;
}
.resetMessage {
    text-align: center;
    font-size: 22px;
    font-style: italic;
    background: hsla(10, 95%, 35%, 0.9);
    color: #dac59f;
    padding: 5px 10px;
    line-height: 1.2;
}
.clearProgressButtonYes, .clearProgressButtonNo {
    width: 100px;
    margin-left: calc(50% - 50px);
    color: white;
    padding: 10px;
    font-size: 18px;
    height: initial;
    margin-top: 40px;
}

.instructions {
    background-image: url(../img/instructions1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;          
    display: none;
    z-index:38;
}

.info {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-image: url(../img/sandBackground.png);
/*    background-size: 20vw;*/
    background-size: 128px;
}
.infoMessage {
    text-align: center;
    margin-top: 80px;
    position: relative;
    font-size: 28px;
    /*padding: 20px;*/
    /*color: #624e34;*/
}
.jobFunction {
    font-size: 18px;
    /*font-style: italic;*/
    background: hsla(10, 95%, 35%, 0.9);
    color: #dac59f;
    padding: 5px 10px;
    line-height: 1.2;
    text-transform: uppercase;
    clear: both;
}
.personName {
    font-size: 28px;
    height: 100px;
    /*font-family: 'Condiment';*/
    /*font-family: 'Merienda-Bold';*/
    /*font-family: 'Roman Grid Caps';*/
    /*font-family: 'Kaushan Script';*/
    font-family: 'Cartoon Shout';
    /*background-color: hsl(34, 51%, 6%);*/
    /*-webkit-background-clip: text;*/
    /*color: transparent;
    text-shadow: -1px 1px 3px hsl(34, 31%, 29%);*/
    /*letter-spacing: -3px;*/
    /*color:hsla(0, 0%, 0%, 0.7);*/
    margin-top: 20px;
    color: hsla(10, 95%, 35%, 0.9);
    /*margin-bottom: 50px;*/
}
.versionNumber {
    position: absolute;
    bottom: 100px;
    width: 100%;
    text-align: center;
}
.copyright {
    position: absolute;
    bottom: 70px;
    width: 100%;
    text-align: center;
}

.backButton {
    background-image: url(../img/menuButtonQuit.png);
    /*position: absolute;
    bottom: 20px;
    left: 10px;*/
}
.backButton:active {
    /*top: initial;
    bottom: 18px;
    position: absolute;*/
}

.instructionsButtonGroup {
    margin: auto;
    width: 200px;
    position: relative;
    height: 64px;
}
.previousInstructionsButton {
    background-image: url(../img/menuButtonBack.png);
    float: left;
}
.instructionText {
    float: left;
    text-align: center;
    color: white;
    width: 100px;
    font-size: 28px;
    padding-top: 5px;
}
.nextInstructionsButton {
    background-image: url(../img/menuButtonPlay.png);
    float: left;
}

.pauseButton {
    /*position: absolute;
    width: 64px;
    overflow: auto;
    bottom: 2px;
    text-align: center;
    margin-left: calc(50% - 32px);*/
    display: none;
    background-image: url(../img/menuButtonPause.png);
    float: right;
}
/*.pauseButton:active, .skipButton:active {
    top: initial;
    bottom: 0px;
    position: absolute;
}*/
.pauseButton.disabled, .instructionsButton.disabled, .settingsButton.disabled {
    opacity:0.1;
}
.pauseButton.disabled:active, .instructionsButton.disabled:active {
    /*bottom: 20px;*/
    top:0px;
}
/*.musicButton.disabled:active{
    top:10px;
}*/

/*.skipButton {
    position: absolute;
    width: 64px;
    overflow: auto;
    bottom: 2px;
    text-align: center;
    margin-left: calc(90% - 32px);
    display: none;
    background-image: url(../img/menuButtonNext.png);
}*/

.pauseOverlay {
    position: absolute;
    top: 0px;
    right: 0px;
    /*width: 0%;*/
    height: 100%;
    width: 100%;
    z-index: 24;
    display: none;
    background: hsla(0, 0%, 0%, 0.7);
}
@keyframes pauseOpen {
    /*from {width:0%;}
    to {width:100%;}*/
    from {bottom:-240px;}
    to {bottom:70px;}
}
.pauseOverlay.open .pauseMenuButtonGroup {
    /*top: 0%;*/
    bottom:100px;
    display: block;
    animation-name: pauseOpen;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;
}
@keyframes pauseClose {
    /*from {width:100%;}
    to {width:0%;}*/
    from {bottom:70px;}
    to {bottom:-240px;}
}
.pauseOverlay.close .pauseMenuButtonGroup {
    /*width: 0%;*/
    /*top: 100%;*/
    bottom:-240px;
    /*display: none;*/
    animation-name: pauseClose;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;
}
.endGameBanner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 19;
    background: hsla(0, 0%, 0%, 0.7);
    display: none;
}
/*.endGameBanner.computerWins {
    background: hsla(0,82%,33%,0.7);
}
.endGameBanner.playerWins {
    background: hsla(199,82%,33%,0.7);
}*/
.pausedText, .endLevelText {
    position: absolute;
    font-size: 44px;
    text-align: right;
    margin: auto;
    text-transform: uppercase;
    right: 20px;
    color: white;
    white-space: nowrap;
    top: -70px;
    /*width: 270px;*/
}
.pauseMenuButtonGroup, .endLevelButtonGroup {
    display: block;
    width: 270px;
    height: 240px;
    /*overflow: auto;*/
    position: absolute;
    right:0px;
    /*right: 0px;*/
}

.pauseMedals {
    position: relative;
    top: -15px;
    background: white;
    width: 100%;
    height: 50px;
    padding: 4px;
}
.pauseMedals .flagBadge, .pauseMedals .killAllCrabsBadge {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    float: left;
    margin-left: 10px;
}
.pauseMedals .starFull, .pauseMedals .starEmpty {
    margin-top: 2px;
}

.pauseMenuButtonGroup .menuButton, .endLevelButtonGroup .menuButton {
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
    font-size: 18px;
    text-align: left;
    padding-left: 44px;
    color: white;
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


.endLevelButtonGroup {
    height: 180px;
}

.mainMenuButtonGroup {
    display: block;
    margin: auto;
    width: 240px;
    height: auto;
    overflow: auto;
    /*top: 240px;*/
    position: relative;
    padding: 10px;
}
.mainMenuButtonGroup .menuButton {
    /*float: none;
    background-color: hsla(10, 95%, 35%, 0.9);
    width: 100%;
    margin-bottom: 20px;
    padding-top: 10px;
    font-size: 18px;
    text-align: left;
    padding-left: 52px;
    color: white;
    height: 50px;
    border-radius: 5px;
    border: 3px solid white;
    */
    background-color: hsla(10, 95%, 35%, 0.9);
    width: 100%;
    margin-bottom: 20px;
    color: white;
    border-radius: 15px;
    border: 3px solid white;
    box-shadow: 0px 3px 0px hsla(0,0%,0%,0.4);
}

.mainMenuText {
    position: relative;
    top: 10px;
    background-image: url(../img/cclogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 600px;
    margin: auto;
    background-position: center;
}

.endGameText {
    position: absolute;
    top: 0px;
    font-size: 0px;
    text-align: center;
    margin: auto;
    width: 100%;
    color: white;
}
.resumeButton {
    background-image: url(../img/menuButtonPlay.png);
    /*left: 20px;*/
}
.skipButton {
    background-image: url(../img/menuButtonNext.png);
}
.nextLevelButton {
    background-image: url(../img/menuButtonNext.png);
    /*left: 20px;*/
}
.replayButton {
    background-image: url(../img/menuButtonRestart.png);
}
.quitButton {
    background-image: url(../img/menuButtonQuit.png);
    /*right: 20px;*/
}
.endGameBanner .replayButton, .endGameBanner .nextLevelButton, .endGameBanner .quitButton {
    display: none;
}

.mainMenu {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*DEC2023*/
    /*width: 400px;
    height: 700px;*/
    background-image: url(../img/mainMenuBackground.png);
    background-repeat: no-repeat;
    background-size: cover;
    /*background-image:url(../img/sandBackground.png);
    background-size: 20vw;*/
    z-index: 39;
}

.preload {
    opacity: 0.01;
    position: absolute;
}
.preload div, .preload img {
    width: 53px;
    height: 53px;
    position: absolute;
}
.preload .levelPaper {/*THE LEFT PAPER CLIP AND STARFISH STILL POPIN. TRYING TO FIX WITH THIS*/
    top: 110px;
    left: 30px;
}

.chooseBattle {
    text-align: center;
    margin-bottom: -40px;
    color: hsla(10, 95%, 35%, 0.9);
}
.levelHeading {
    text-align: center;
    color: white;
    margin-top: 50px;
    background: hsla(10, 95%, 35%, 0.9);
    padding: 10px;
    font-weight: normal;
    font-size: 28px;
}
.levelHeadingSub {
    font-size: 18px;
    color: hsla(0, 0%, 100%, 0.5);
}

.levelButtons {
    position: relative;
    top: 0px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /*border-right: 10px solid transparent;*/       /*FOR THE SCROLLBAR*/
    padding-bottom: 64px;
    /*background: #7f7f7f;*/
    /*background-image:url(../img/mainMenuBackground.png);
    background-repeat: repeat-x;
    background-size: contain;*/
    /*padding: 30px 0px 0px 0px;*/
    
    /*box-sizing: border-box;*/
    /*box-shadow: 0px 0px 7px hsla(0,0%,0%,0.5) inset;*/
}


/*CAN'T STYLE THE SCROLLBAR BECAUSE THIS OVERRIDES IT -webkit-overflow-scrolling: touch;*/
/*.levelButtons::-webkit-scrollbar {
    width: 10px !important;
    height: 5px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important
}
.levelButtons::-webkit-scrollbar-thumb {
    border-radius: 8px !important;
    background-color: hsl(45, 88%, 57%) !important;
    box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.9) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important
}
.levelButtons::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px hsla(0, 0%, 0%, 0.9) !important;
    border-radius: 8px !important;
    background-color: hsla(0, 0%, 0%, 0.5) !important;
    margin: 10px 0px 74px 0px;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important
}*/

.levelButton {
    text-align: left;
    border-radius: 7px;
    /*box-shadow: 0px 3px 2px hsla(0,0%,0%,0.5);*/
    box-shadow: 2px 3px 0px hsla(0,0%,0%,0.4);
    position: relative;
    /*float: left;*/
    /*background-image: url(../img/levelThumbnailPlaceholder.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    height: 150px;
    /*width: 44%;
    margin-left: 4%;*/
    width: 90%;
    max-width: 300px;
    /*margin-left: 7%;*/
    margin: auto;
    margin-bottom: 20px;
    background-color: #f3db97;
    box-sizing: border-box;
    border: 5px solid #f3db97;
    background-position-x: 100%;
}
.levelButton:hover{
    cursor: pointer;
}
.levelButton:hover {
    /*width: 100%;
    max-width: 310px;*/
    top: -5px;
}
.levelButton:active {
    top:2px;
}

.levelButton.lockedLevel {
    max-width: 150px;
}
.lockedLevel:before {
    content: '';
    background-image: url(../img/paperClip.png);
    width: 16px;
    height: 40px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(5deg);
    top: -14px;
    right: -2px;
    z-index: 33;
}
.levelButton.lockedLevel .levelPaper {
    display: none;
}
.levelButton.lockedLevel .levelPhoto {
    background-image: none !important;
}
.levelLockedGraphic {
    color: hsla(10, 95%, 35%, 0.9);
    /*box-shadow: 1px 0px 6px hsla(0,0%,0%,0.5);*/
    box-shadow: 1px 1px 0px 1px hsla(0,0%,0%,0.5);
    position: relative;
    top: -13px;
    width: 146px;
    left: -5px;
    height: 150px;
    border-radius: 5px;
    transform: rotate(1deg);
    background-color: #f3db97;
}
.lockedText {
    font-size: 32px;
    text-align: center;
    display: block;
    border-top: 3px solid hsla(10, 95%, 35%, 0.9);
    border-bottom: 3px solid hsla(10, 95%, 35%, 0.9);
    width: 90%;
    margin: 10px auto auto auto;
    transform: rotate(-4deg);
    position: relative;
    top: 9px;
    line-height: 1;
}
.toUnlockText {
    margin-top: 18px;
}
.toUnlockNeed {
    text-align: center;
}
.starsNeededGroup {
    margin: auto;
    width: 110px;
}
.starsToUnlockNumber {
    font-size: 38px;
    margin-left: 5px;
    position: relative;
    top: -7px;
}
.toUnlockTextEnd {
    clear: both;
    text-align: center;
    margin-top: -10px;
}


#level1 .levelPhoto {background-image:url(../img/levelThumbnail1.png);}
#level2 .levelPhoto {background-image:url(../img/levelThumbnail2.png);}
#level3 .levelPhoto {background-image:url(../img/levelThumbnail3.png);}
#level4 .levelPhoto {background-image:url(../img/levelThumbnail4.png);}
#level5 .levelPhoto {background-image:url(../img/levelThumbnail5.png);}
#level6 .levelPhoto {background-image:url(../img/levelThumbnail6.png);}
#level7 .levelPhoto {background-image:url(../img/levelThumbnail7.png);}
#level8 .levelPhoto {background-image:url(../img/levelThumbnail8.png);}
#level9 .levelPhoto {background-image:url(../img/levelThumbnail9.png);}
#level10 .levelPhoto {background-image:url(../img/levelThumbnail10.png);}
#level11 .levelPhoto {background-image:url(../img/levelThumbnail11.png);}
#level12 .levelPhoto {background-image:url(../img/levelThumbnail12.png);}
#level13 .levelPhoto {background-image:url(../img/levelThumbnail13.png);}
#level14 .levelPhoto {background-image:url(../img/levelThumbnail14.png);}
#level15 .levelPhoto {background-image:url(../img/levelThumbnail15.png);}
#level16 .levelPhoto {background-image:url(../img/levelThumbnail16.png);}
#level17 .levelPhoto {background-image:url(../img/levelThumbnail17.png);}
#level18 .levelPhoto {background-image:url(../img/levelThumbnail18.png);}
#level19 .levelPhoto {background-image:url(../img/levelThumbnail19.png);}
#level20 .levelPhoto {background-image:url(../img/levelThumbnail20.png);}
#level21 .levelPhoto {background-image:url(../img/levelThumbnail21.png);}
#level22 .levelPhoto {background-image:url(../img/levelThumbnail22.png);}
#level23 .levelPhoto {background-image:url(../img/levelThumbnail23.png);}
#level24 .levelPhoto {background-image:url(../img/levelThumbnail24.png);}
#level25 .levelPhoto {background-image:url(../img/levelThumbnail25.png);}
#level26 .levelPhoto {background-image:url(../img/levelThumbnail26.png);}
#level27 .levelPhoto {background-image:url(../img/levelThumbnail27.png);}
#level28 .levelPhoto {background-image:url(../img/levelThumbnail28.png);}
#level29 .levelPhoto {background-image:url(../img/levelThumbnail29.png);}
#level30 .levelPhoto {background-image:url(../img/levelThumbnail30.png);}

/*MULTIPLAYER*/
#level201 .levelPhoto {background-image:url(../img/levelThumbnail201.png);}
#level202 .levelPhoto {background-image:url(../img/levelThumbnail202.png);}
#level203 .levelPhoto {background-image:url(../img/levelThumbnail203.png);}
#level301 .levelPhoto {background-image:url(../img/levelThumbnail301.png);}
#level302 .levelPhoto {background-image:url(../img/levelThumbnail302.png);}
#level303 .levelPhoto {background-image:url(../img/levelThumbnail303.png);}
#level401 .levelPhoto {background-image:url(../img/levelThumbnail401.png);}
#level402 .levelPhoto {background-image:url(../img/levelThumbnail402.png);}
#level403 .levelPhoto {background-image:url(../img/levelThumbnail403.png);}

.levelPhoto {
    width: 130px;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    right: 0;
    /*box-shadow: 0px 1px 1px hsla(0,0%,0%,0.5);*/
    /*transform: rotate(5deg);*/
    border: 6px solid hsla(0, 0%, 95%, 1);
    box-sizing: content-box;
    height: 130px;
    box-shadow: 0px 1px 0px 1px hsla(0,0%,0%,0.2);
}
.levelPhoto:before {
    content: '';
    background-image: url(../img/paperClip.png);
    width: 16px;
    height: 40px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(72deg);
    bottom: 3px;
    right: -9px;
}


.levelPhotoZoom {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 37;
    border: 6px solid white;
    box-sizing: content-box;
    display: none;
}

@keyframes photoSpin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}

    /*0%   {transform:rotate(0deg);}
    25%  {transform:rotate(30deg);}
    50%   {transform:rotate(0deg);}
    75%  {transform:rotate(-30deg);}
    100%  {transform:rotate(0deg);}*/

    /*0%   {transform:rotate(0deg);}
    25%  {transform:rotate(2deg);}
    50%   {transform:rotate(0deg);}
    75%  {transform:rotate(-2deg);}
    100%  {transform:rotate(0deg);}*/

    0%   {margin-top:0%;}
    50%   {margin-top:-50%;}
    100%  {margin-top:0%;}
}
.levelPhotoZoom.spin {
    /*animation-name: photoSpin;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;*/
}
.levelPhotoZoom.spinOut {
    /*animation-name: photoSpin;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;*/
}

.levelBackgroundFade {
    display: none;
    opacity: 0;
    background-color: #897953;/*MATCH WITH BODY*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 36;
}

.levelButton:after {
    content: '';
    background: #f3db97;
    width: 10px;
    height: 40px;
    position: absolute;
    right: -15px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    top: 10px;
    /*box-shadow: 1px 2px 1px hsla(0,0%,0%,0.5);*/
    box-shadow: 2px 3px 0px hsla(0,0%,0%,0.4);
}
.levelPaper {
    background: hsla(0, 0%, 95%, 1);
    width: 49%;
    padding: 5px 0px;
    position: absolute;
    height: 100%;
    box-shadow: 0px 1px 0px 1px hsla(0,0%,0%,0.2);
    transform: rotate(-2deg);
}
.levelPaper:before {
    content: '';
    background-image: url(../img/paperClip.png);
    width: 16px;
    height: 40px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-5deg);
    top: -16px;
    left: 5px;
}

.levelText {
    font-size: 20px;
    text-align: center;
    color: #330800;
}
.starEmpty, .starFull {
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    float: left;
    margin-top: 6px;
    margin-left: 4px;

    /*display: none;*/
}
.starEmpty {
    background-image:url(../img/starEmpty.png);
}
.starFull {
    background-image:url(../img/starFull.png);            
}

.flagBadge, .killAllCrabsBadge {
    width: 44px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 10px;
    position: absolute;
    background-image: url(../img/badgeEmpty.png);
}
.flagBadge {
    left: 15px;
}
#level1 .flagBadge  {
    display: none;
}
.killAllCrabsBadge {
    right: 15px;
}
.flagBadge.earned3 {
    background-image: url(../img/badgeFlag3.png);
}
.flagBadge.earned2 {
    background-image: url(../img/badgeFlag2.png);
}
.flagBadge.earned1 {
    background-image: url(../img/badgeFlag1.png);
}
.killAllCrabsBadge.earned3 {
    background-image: url(../img/badgeCrab3.png);
}
.killAllCrabsBadge.earned2 {
    background-image: url(../img/badgeCrab2.png);
}
.killAllCrabsBadge.earned1 {
    background-image: url(../img/badgeCrab1.png);
}

.gameplayBadge {
    display: none;
    position: absolute;
    margin: auto;
    left: 3.6%;
    /*left: 31%;*/
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: none !important;
    background-color: transparent !important;
}
.gameplayBadge.Flag3 {
    background-image:url(../img/badgeFlag3.png);
}
.gameplayBadge.Flag2 {
    background-image:url(../img/badgeFlag2.png);
}
.gameplayBadge.Flag1 {
    background-image:url(../img/badgeFlag1.png);
}
.gameplayBadge.Crab3 {
    background-image:url(../img/badgeCrab3.png);
}
.gameplayBadge.Crab2 {
    background-image:url(../img/badgeCrab2.png);
}
.gameplayBadge.Crab1 {
    background-image:url(../img/badgeCrab1.png);
}

.statistics {
    font-size: 14px;
    float: left;
    clear: both;
    position: absolute;
    right: 5px;
    bottom: 10px;
    display: none;
}
.levelWins {
    float: right;
}

#levelButtonsMultiplayer .starEmpty, #levelButtonsMultiplayer .starFull, #levelButtonsMultiplayer .statistics,
#levelButtonsMultiplayer .flagBadge, #levelButtonsMultiplayer .killAllCrabsBadge {
    display: none;
}

@keyframes popupAlert {
    /*from {background-color: hsla(37, 28%, 26%, 0.9);}
    to {background-color: hsla(38, 34%, 59%, 0.9);}*/
    from {background-color: hsla(0, 0%, 0%, 0.1);}
    to {background-color: hsla(0, 0%, 0%, 0.5);}
}
.popupMenu {
    display: none;
    opacity: 0;
    position: absolute;
    top: 100px;
    left: 0;
    background: hsla(0, 0%, 0%, 0.7);
/*    padding: 1vw;*/
    padding: 10px;
    color: white;
    z-index: 32;
    width: 100%;

    animation-name: popupAlert;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.popupMenuInside {
    width: 160px;
    margin: auto;
}
.popupMenu img {
    width: 120%;
    position: relative;
/*    left: -2.5vw;*/
    left:-20%;
    height: auto;
}
/*.switchText {
    text-align: center;
    font-size: 4vw;
    margin-bottom: 1vw;
}*/
.switchOldButton, .switchNewButton {
    /*width: 109px;*/
    float: left;
    background-color: hsla(10, 95%, 35%, 0.7);
    border: 3px solid white;
    border-radius: 10px;
    padding: 5px;
    /*box-shadow: 0px 3px 2px hsla(0,0%,0%,0.5);*/
    box-shadow: 0px 3px 0px hsla(0,0%,0%,0.4);
    cursor: pointer;
}
.switchOldButton:active, .switchNewButton:active {
    position: relative;
    top:2px;
    background-color: hsla(10, 50%, 60%, 1) !important;
    /*box-shadow: 0px 0px 7vw 2vw white inset;*/
}
.switchNewButton {
    float: right;
}
.keepOldText, .switchNewText {
    text-align: center;
/*    font-size: 4.5vw;*/
    font-size: 28px;
/*    margin-top: -3vw;*/
    margin-top:-30px;
}
.switchOrText {
    text-align: center;
    float: left;
/*    font-size: 4.5vw;*/
    font-size: 28px;
    background: white;
    color: #8a220b;
    line-height: 1.4;
}

/*NEWER HI-RES IPADS AND IPAD PRO*/
/*@media (min-width: 1536px) {
    .mainMenuText {
        max-width: 1000px;
    }
    .levelSelectBottomBar, .gameplayBottomBar, .instructionsBottomBar, .infoBottomBar, .resetBottomBar, .mainMenuBottomBar {
        height: 128px;
    }
    .resetButton {
        bottom: 24px;
    }
    .resetButton:active {
        bottom: 22px;
    }
    .menuButton {
        width: 96px;
        height: 96px;
    }
    .mainMenuButtonGroup {
        width: 480px;
    }
    .selectLevelButton {
        font-size: 65px !important;
        padding: 25px 0px 20px 0px !important;
        height: 140px !important;
        margin-bottom: 40px !important;
    }
    .playMultiplayerButton {
        font-size: 45px !important;
        padding: 35px 0px 20px 0px !important;
        height: 140px !important;
    }
    .pauseMenuButtonGroup, .endLevelButtonGroup {
        width: 540px;
        height: 480px;
    }
    .pauseMenuButtonGroup .menuButton, .endLevelButtonGroup .menuButton {
        padding-top: 20px;
        font-size: 36px;
        padding-left: 88px;
        margin-bottom: 20px;
    }
    .levelButton {
        height: 300px;
        width: 90%;
        max-width: 600px;
    }
    .levelPhoto {
        width: 260px;
        height: 260px;
    }
    .levelText {
        font-size: 40px;
    }
    .starEmpty, .starFull {
        width: 80px;
        height: 80px;
        margin-top: 12px;
        margin-left: 8px;
    }
    .flagBadge, .killAllCrabsBadge {
        width: 88px;
        height: 88px;
        bottom: 20px;
    }
    .flagBadge {
        left: 30px;
    }
    .killAllCrabsBadge {
        right: 30px;
    }
    .chooseBattle {
        font-size: 36px;
    }
    .levelHeading {
        font-size: 56px;
    }
    .levelHeadingSub {
        font-size: 36px;
    }
    .levelSelectText {
        font-size: 28px;
        top: 32px;
    }
    .totalStars {
        font-size: 32px;
        right: 16px;
        bottom: 14px;
    }
    .totalStars .starFull {
        top: -64px;
        right: 32px;
        width: 64px;
        height: 64px;
    }
    .totalStarsText {
        top: 0px;
        right: 18px;
    }
    .pausedText, .endLevelText {
        font-size: 88px;
        top: -140px;
        right: 40px;
    }
    .instructionsButtonGroup {
        width: 400px;
        height: 108px;
    }
    .instructionText {
        font-size: 56px;
        padding-top: 12px;
        margin-left: 50px;
    }
    .nextInstructionsButton {
        margin-left: 50px;
    }
    .jobFunction {
        font-size: 36px;
    }
    .personName {
        font-size: 56px;
        height: 200px;
    }
    .versionNumber {
        bottom: 200px;
        font-size: 32px;
    }
    .copyright {
        bottom: 140px;
        font-size: 32px;
    }
    .resetMessage {
        font-size: 44px;
    }
    .clearProgressButtonYes, .clearProgressButtonNo {
        margin-left: calc(50% - 100px);
        padding: 20px;
        font-size: 36px;
        width: 200px;
    }
}*/


@media (min-width: 768px) {
    .turnTextLeftTail, .turnTextRightTail {
    /*17 JAN 2024*/
        /*bottom: 5.4vw !important;*/
/*        bottom: 3% !important;*/
    /*end of 17 JAN 2024*/
    }
}

@media (max-width: 600px) {
    /*ADDED 21 JAN 2024 AFTER REMOVING VIEWPORT*/
    .keepOldText, .switchNewText {
        font-size: 16px;
        margin-top: -17px;
    }
    .switchOrText {
        font-size: 20px;
    }
}

@media (max-width: 320px) {
    .mainMenuText {
        width: 80%;
    }
    .mainMenuButtonGroup {
        top:0px !important;
    }
    .selectLevelButton {
        font-size: 25px !important;
        padding: 5px 0px 5px 0px !important;
        height: 50px !important;
    }
    .playMultiplayerButton {
        font-size: 20px !important;
        padding: 10px 0px 10px 0px !important;
        height: 50px !important;
    }
    .volumeText {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .volumeBar {
        top: 20px;
        margin: auto auto 80px auto;
    }
    .volumeBar:after {
        border-bottom: 5px solid black;
        padding-top: 22px;
    }
    .musicVolumeAmount, .fxVolumeAmount {
        font-size: 21px;
    }
}


/*WHEN FINISHED TESTING*/
.decisionDirection {
    display: none;
}



/*----------SCREENSHOTS----------*/
/*IN CHROME VIEW IPAD SIZE AT 100%*/
/*#gameplay {
    margin-top: -170px;
    background: #897953;
    width: 100%;
}
.waves {
    display: none !important;
}
.myTurn {
    animation-name: nothing;
}
.commanderCrab {
    display: none !important;
}*/


/*DOES NOT WORK ANYMORE*/
/*body {
    position: relative;
    top: -100px;
}*/



/*.boardSquare {
    background-image: none;
    border: 1px dashed #967c50;
}*/
/*.pieceGraphic {
    border-radius: 100%;
}
.rock .pieceGraphic {
    background-image: url(../img/KillRock.png) !important;
    background-position: -3px 5px;
}
.paper .pieceGraphic {
    background-image: url(../img/KillPaper.png) !important;
    background-position: -3px 8px;
}
.scissors .pieceGraphic {
    background-image: url(../img/KillScissors.png) !important;
    background-position: -3px 5px;
}
.player .pieceGraphic {
    background-color: #e73714;
}
.computer .pieceGraphic {
    background-color: #41baf8;
}
.computer3 .pieceGraphic {
    background-color: #f8bb42;
}
.computer4 .pieceGraphic {
    background-color: #5fe91b;
}*/

/*----------END OF SCREENSHOTS----------*/





/*Z-INDEX*/

/*

.iphoneStatusBar {
    z-index: 40;
}



.mainMenu {
    z-index: 39;
}
.instructions {
    z-index: 38;
}
.settings {
    z-index: 38;
}

.levelPhotoZoom {
    z-index: 37;
}

.levelBackgroundFade {
    z-index: 36;
}

.levelSelectBottomBar .backButton {
    z-index: 35;
}
.levelSelectText {
    z-index: 34;
}
.lockedLevel:before {
    z-index: 33;
}

.popupMenu {
    z-index: 32;
}





.endGameWave {
    z-index: 28;
}



.pauseOverlay {
    z-index: 24;
}
.decision {
    z-index: 23;
}


.commanderCrab {
    z-index: 22;
}
killPieceAnimation killedPiece
    z-index: 21;

.player.winGame {
    z-index: 20 !important;
}


.endGameBanner {
    z-index: 19;
}

.decision (endGame) {
    z-index: 17;
}

.moveTarget {
    z-index: 16;
}

player drag
    z-index: 15;


function playerShowOpenMoveTargets
    z-index: 14;

.player {
    z-index: 13;
}    

.moveTargetDroppable {
    z-index: 8;
}

.endGameStars > div {
    z-index: 7;
}



.waveGraphic {
    z-index: 5;//ANIMATES BETWEEN THESE 2 -- CAUSED FLICKER, REMOVED
    z-index: 4;
}




*/