.clickMe {
    width: 5em;
    height: 5em;
    visibility: hidden;
    margin: 1em auto;
    background-color: white;
    border: 2px solid red;
}

    .clickMe.active {
        visibility: visible;
    }










/* main board */
#board {
    font-size: 0;
}

#mainBoard {
    position: relative;
    width: 100%;
}

#signature {
    position: absolute;
    top: 97%;
    left: 85%;
    width: 12%;
}



#queue {
    display: block;
}

#game .actionTile {
    float: left;
    width: 7.8%;
    margin-left: -0.8%;
}

#game .firstAT {
    margin-left: 0 !important;
}

.shellContainer {
    position: absolute;
    width: 2.8%;
    margin-left: 5.2%;
    margin-top: -8%;
    text-align: center;
}

.ATShellCount {
    /*position: absolute;
    font-size: 10px;
    color: black;
    top: 45%;
    left: 51%;
    transform: translate(-50%, -50%);*/
    text-anchor: middle;
    font: bold 40px sans-serif;
}

#game #queue .overlayPath {
    fill: #dca94e;
    fill-opacity: 0;
    opacity: 1;
    stroke: none;
    pointer-events: none;
}
/* Outline the exact legal action, including individual halves of split tiles. */
#game #queue .overlayPath.active {
    cursor: pointer;
    pointer-events: all;
    fill: #e6c075;
    fill-opacity: .12;
    stroke: #e6c075;
    stroke-opacity: 1;
    stroke-width: 1.875px;
    vector-effect: non-scaling-stroke;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 2px #33200e);
}
#game #queue .overlayPath.active:hover,
#game #queue .overlayPath.active:focus-visible {
    fill-opacity: .25;
    stroke: #e6c075;
    stroke-width: 2.25px;
}

/*#region Progress tracks */
.trackField {
    position: absolute;
    width: 6%;
    height: 2.9%;
    text-align: center;
}

.trackColumn1 {
    left: 4.75%;
}

.trackColumn2 {
    left: 13%;
}

#track0_1, #track1_1 {
    top: 39.7%;
}

#track0_2, #track1_2 {
    top: 33.5%;
}

#track0_3, #track1_3 {
    top: 27.4%;
}

#track0_4, #track1_4 {
    top: 20.8%;
}

#track0_5, #track1_5 {
    top: 14.5%;
}

#track2_1, #track3_1 {
    top: 89.2%;
}

#track2_2, #track3_2 {
    top: 82.9%;
}

#track2_3, #track3_3 {
    top: 76.9%;
}

#track2_4, #track3_4 {
    top: 70.4%;
}

#track2_5 {
    top: 63.75%;
}

.progressMarker {
    width: auto;
    height: 100%;
    margin: auto;
    vertical-align: top;
}
/*#endregion*/

/*#region Achievements */
.achievement {
    position: absolute;
    width: 10.7%;
}

.epoch1 {
    top: 73%;
}

.epoch2 {
    top: 37.9%;
}

.epoch3 {
    top: 5.5%;
}

.achievement1 {
    left: 24.6%;
}

.achievement2 {
    left: 37.975%;
}

.achievement3 {
    left: 51.35%;
}

.achievement4 {
    left: 64.72%;
}

.achievementOverlay {
    fill: #FFFFFF;
    fill-opacity: 0.0;
    opacity: 0.0;
    stroke-linejoin: round;
    stroke-opacity: 0.0;
    stroke-width: 0;
    stroke: #FFFFFF;
}

    .achievementOverlay.active {
        fill-opacity: 1.0;
        opacity: 0.5;
        stroke-opacity: 1.0;
        stroke-width: 4;
        stroke: blue;
    }



/*#region Executed third epoch events */
.exEvent {
    position: absolute;
    width: 5%;
    left: 78%;
}

.exEvent1 {
    top: 4%;
}

.exEvent2 {
    top: 14.5%;
}

.exEvent3 {
    top: 25%;
}

.exEvent4 {
    top: 35.5%;
}

.exEvent5 {
    top: 46%;
}

.exEvent6 {
    top: 56.5%;
}

.exEvent7 {
    top: 67%;
}

/*#region Events */
.event {
    position: absolute;
    width: 10.4%;
    left: 85.4%;
}

.event1 {
    top: 72.6%;
}

.event2 {
    top: 37.8%;
}

.event3 {
    top: 4%;
}
/*#endregion*/

/*#region Arrows */
.arrowSVG {
    width: 4.5%;
    position: absolute;
}

.arrowRow0 {
    top: 64%;
}

.arrowRow1 {
    top: 29%;
}

.arrowCol0 {
    left: 32%;
}

.arrowCol1 {
    left: 36.775%;
}

.arrowCol2 {
    left: 45.375%;
}

.arrowCol3 {
    left: 50.15%;
}

.arrowCol4 {
    left: 58.75%;
}

.arrowCol5 {
    left: 63.52%;
}

.arrowFromLeft {
    transform: rotate(-45deg);
}

.arrowFromRight {
    transform: rotate(-135deg);
}

.arrowOverlay {
    fill: #FFFFFF;
    fill-opacity: 0.0;
    opacity: 0.0;
    stroke-linejoin: round;
    stroke-opacity: 0.0;
    stroke-width: 0;
    stroke: #FFFFFF;
}

    .arrowOverlay.active {
        fill-opacity: 1.0;
        opacity: 0.5;
        stroke-opacity: 1.0;
        stroke-width: 4;
        stroke: blue;
    }
/*#endregion*/

#newTiles {
    display: none;
    position: absolute;
    top: 0;
    z-index: 10;
    width: 23%;
    height: 100%;
    /*background-color: #e2e4ff; /*#fadea8 */
    background: url(/game-plugins/tribes/1.1.0/images/background.webp) repeat;
    background-size: 70%;
    border: 4px solid #FFFFFF;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#newTiles.show {
    display: flex !important;
}

.newTile {
    width: 60%;
}

.newTileOverlay {
    fill: #FFFFFF;
    fill-opacity: 0.0;
    opacity: 0.0;
    stroke-linejoin: round;
    stroke-opacity: 0.0;
    stroke-width: 0;
    stroke: #FFFFFF;
}

    .newTileOverlay.active {
        fill-opacity: 1.0;
        opacity: 0.5;
        stroke-opacity: 1.0;
        stroke-width: 4;
        stroke: blue;
    }

    .newTileOverlay.selected {
        opacity: 1.0;
        stroke-opacity: 1.0;
        stroke-width: 4;
    }

#territory {
    display: none;
    position: absolute;
    top: 0;
    z-index: 10;
    width: 77%;
    height: 100%;
    left: 23%;
    /*background-color: #e2e4ff; /*#fadea8 */
    background: url(/game-plugins/tribes/1.1.0/images/background.webp) repeat;
    background-size: 70%;
    overflow: auto;
    border: 4px solid #FFFFFF;
    box-sizing: border-box;
}

#game #territory.show {
    display: block !important;
}

#territory .close {
    position: absolute;
    right: 30px;
}

#territory .ui-btn {
    position: fixed;
    top: auto;
    right: auto;
    margin: 0;
    padding: 0;
    z-index: 20;
}

.landTile {
    width: 10%;
    position: absolute;
}

.exhaustedResource {
    width: 30%;
    margin-left: -65%;
    display: inline-block;
    vertical-align: middle;
}

.memberOnTile {
    width: 35%;
    display: inline-block;
    vertical-align: middle;
}

.overlaySVG {
    position: relative;
    z-index: 10;
}

.overlayPolygon {
    fill: #FFFFFF;
    opacity: 0.0;
}

    .overlayPolygon.active {
        opacity: 0.5;
        stroke: blue;
        stroke-width: 4;
    }

/* Magnification */
.magnified {
    max-width: 255.15px;
}

    h1 {
        font-size: larger;
    }

.magnifiedActionTile {
    max-height: 227px;
    max-width: 233px;
}

.magnifiedAchievement {
    max-height: 229px;
    max-width: 229px;
}