/**
 * Tower Wrapper
 */
.towerCenter2,
.towerCenter3 {
    position: absolute;
    top: 50%;
    left: 50%;
}
    .towerCenter2 {
        width: 30px;
        height: 30px;
        margin-left: -15px;
        margin-top: -15px;
    }
    .towerCenter3 {
        width: 45px;
        height: 45px;
        margin-left: -22.5px;
        margin-top: -22.5px;
    }

.towerShadow {
    box-shadow: 2px 2px 6px 0 black;
    z-index: 0;
}
.towerSelect {
    z-index: 10;
	cursor: pointer;
}


.towerRange {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgb(255, 204, 0);
    background: rgb(255, 255, 0);
    border-radius: 50%;
    opacity: 0.3;
    z-index: 1;
}
.towerPlaceholder2,
.towerPlaceholder3 {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 1px;
    z-index: 1;
}
    .towerPlaceholder2 {
        width: 28px;
        height: 28px;
        margin-left: -15px;
        margin-top: -15px;
    }
    .towerPlaceholder3 {
        width: 43px;
        height: 43px;
        margin-left: -22.5px;
        margin-top: -22.5px;
    }

.towerBuild {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    border-radius: 2px;
    z-index: 10;
}


.selected .towerSelect {
    box-shadow: 0 0 10px 2px rgb(255, 153, 0);
    z-index: 0;
}
    .selected .towerRange {
        display: block;
        z-index: 3;
    }
    .selected .towerPlaceholder2,
    .selected .towerPlaceholder3 {
        z-index: 2;
    }



/**
 * Tower Content
 */
.towerContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(207, 209, 204);
    border: 1px solid rgb(141, 129, 129);
    border-radius: 2px;
    cursor: pointer;
}
    .withBoost { box-shadow: 0 0 10px 2px rgb(108, 102, 159); }
    .towerLock {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        margin-left: -3px;
        margin-top: -3px;
        border: 1px solid black;
        border-radius: 10px;
        background: rgb(253, 120, 64);
    }
    .towerScale {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        margin-left: -14px;
        margin-top: -14px;
    }
        .towerPlaceholder3 .towerScale {
            transform: scale(1.5);
        }

    .towerRotate2,
    .towerRotate3 {
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 4px;
        right: 2px;
        z-index: 1;
    }
        .towerRotate3 { bottom: 2px; }

    .towerContent:before,
    .towerContent:after,
    .towerCorner {
        position: absolute;
        width: 1px;
        height: 1px;
        border: 1px solid rgb(167, 171, 157);
    }
        .towerContent:before,
        .towerContent:after {
            content: "";
        }
        .towerContent:before  {
            top: 2px;
            left: 2px;
        }
        .towerContent:after {
            top: 2px;
            right: 2px;
        }
        .towerCorner {
            bottom: 2px;
            left: 2px;
        }

    .towerLevels {
        position: absolute;
        right: 4px;
        bottom: 1px;
        width: 20px;
        height: 2px;
        padding: 1px;
        background: rgb(37, 34, 43);
    }
        .towerLevels div {
            float: left;
            width: 2px;
            height: 2px;
            border-right: 1px solid rgb(37, 34, 43);
            background: rgb(110, 96, 119);
        }
        .towerLevels .type1 { background: rgb(193, 174, 202); }
        .towerLevels .type2 { background: rgb(255, 102, 0); }
        .towerLevels .type3 { background: rgb(255, 204, 0); }
        .towerLevels .type4 { background: rgb(255, 255, 0); }
        .towerLevels .type5 { background: rgb(0, 204, 0); }
        .towerLevels .type6 { background: rgb(0, 204, 153); }

    .towerNumber {
        position: absolute;
        right: 1px;
        bottom: 1px;
        width: 5px;
        height: 8px;
        padding-right: 1px;
        background: rgb(37, 34, 43);
        text-align: center;
        font-size: 7px;
    }

    .towerLoader {
        position: absolute;
        display: none;
        top: 50%;
        left: 3px;
        height: 3px;
        margin-top: -3px;
        border: 1px solid black;
        background: linear-gradient(to right, rgb(255, 153, 0), rgb(255, 201, 0));
    }



/**
 * Show / Hide
 */
.loading .towerRotate2,
.loading .towerRotate3,
.loading .towerLock {
    display: none !important;
}
.loading .towerLoader {
    display: block;
}

.locked  .towerLock {
    display: block;
}



/**
 * Ranges
 */
.towerRange30  { width:  60px; height:  60px; margin-left:    -30px; margin-top:    -30px; }
.towerRange45  { width:  90px; height:  90px; margin-left:    -45px; margin-top:    -45px; }
.towerRange60  { width: 120px; height: 120px; margin-left:    -60px; margin-top:    -60px; }
.towerRange75  { width: 150px; height: 150px; margin-left:    -75px; margin-top:    -75px; }
.towerRange90  { width: 180px; height: 180px; margin-left:    -90px; margin-top:    -90px; }
.towerRange105 { width: 210px; height: 210px; margin-left:   -105px; margin-top:   -105px; }
.towerRange112 { width: 225px; height: 225px; margin-left: -112.5px; margin-top: -112.5px; }
.towerRange120 { width: 240px; height: 240px; margin-left:   -120px; margin-top:   -120px; }
.towerRange135 { width: 270px; height: 270px; margin-left:   -135px; margin-top:   -135px; }
.towerRange150 { width: 300px; height: 300px; margin-left:   -150px; margin-top:   -150px; }



/**
 * Normal Tower
 */
.shootBody {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid rgb(70, 70, 70);
    border-radius: 14px;
    background: radial-gradient(closest-side, rgb(149, 149, 149), rgb(81, 81, 81));
}
.shootTank {
    position: absolute;
    top: 8px;
    left: 17px;
    width: 8px;
    height: 4px;
    border: 1px solid rgb(70, 70, 70);
    border-left: none;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgb(110, 110, 110), rgb(254, 254, 254));
}


.shootAmmo {
    display: none;
    position: absolute;
    width: 6px;
    height: 6px;
    background: black;
    border-radius: 3px;
}



/**
 * Fast Tower
 */
.fastBody {
    position: absolute;
    top: 1px;
    left: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid rgb(92, 92, 92);
    border-radius: 18px;
    background: radial-gradient(closest-side, white, rgb(163, 163, 163));
}
.fastTank {
    position: absolute;
    top: 7px;
    left: 18px;
    width: 8px;
    height: 6px;
    border: 1px solid rgb(92, 92, 92);
    border-left: none;
    border-radius: 3px;
    background: linear-gradient(to bottom, rgb(174, 174, 174), rgb(211, 211, 211));
}


.fastAmmo {
    display: none;
    position: absolute;
    width: 7px;
    height: 7px;
}
    .fastAmmo:before,
    .fastAmmo:after {
        content: "";
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgb(91, 91, 255);
        border-radius: 2px;
    }
    .fastAmmo:before { top: 0; left: 0; }
    .fastAmmo:after  { top: 2px; left: 3px; }



/**
 * Missile Tower
 */
.missileBase {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: rgb(97, 97, 97);
    border: 1px solid rgb(46, 46, 46);
    border-radius: 0 5px 5px 0;
}
    .missileBase:before,
    .missileBase:after {
        content: "";
        position: absolute;
        left: 1px;
        width: 12px;
        height: 2px;
        background: rgb(230, 230, 230);
        border: 1px solid rgb(115, 116, 114);
    }
    .missileBase:before { top: -1px; }
    .missileBase:after  { top: 13px; }


.missileBody {
    position: absolute;
    top: 7px;
    left: 3px;
    height: 6px;
    width: 10px;
    border: 1px solid rgb(79, 79, 79);
    background: linear-gradient(to bottom, rgb(167, 167, 167) 10%, rgb(249, 249, 249) 50%, rgb(167, 167, 167) 90%);
}

.missileTail,
.missileHead {
    position: absolute;
    width: 0;
    font-size: 0;
    line-height: 0%;
    border-color: transparent;
    border-style: solid;
    border-left-color: rgb(112, 8, 10);
}
    .missileTail {
        top: 1px;
        left: 4px;
        border-width: 10px;
    }
    .missileHead {
        top: 6px;
        left: 14px;
        border-width: 5px 10px;
    }

.missileTail:after,
.missileHead:after {
    content: "";
    position: absolute;
    width: 0;
    font-size: 0;
    line-height: 0%;
    border-color: transparent;
    border-style: solid;
    border-left-color: rgb(112, 8, 10);
}
    .missileTail:after {
        top: -8px;
        left: -10px;
        border-width: 8px;
    }
    .missileHead:after {
        top: -3px;
        left: -9px;
        border-width: 3px 8px;
    }


.missileAmmo {
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 5;
}

.attacking .missileHead,
.attacking .missileBody,
.attacking .missileTail { display: none; }



/**
 * Anti-Air Tower
 */
.airMissile1,
.airMissile2,
.airMissile3,
.airMissile4 {
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid rgb(115, 116, 114);
    background: rgb(242, 241, 242);
}
    .airMissile1,
    .airMissile3 {
        transform: skew(10deg, 10deg);
    }
    .airMissile2,
    .airMissile4 {
        transform: skew(-10deg, -10deg);
    }
    .airMissile1 { top:  2px; left:  3px; }
    .airMissile2 { top:  2px; left: 14px; }
    .airMissile3 { top: 13px; left: 14px; }
    .airMissile4 { top: 13px; left:  3px; }


.airMissile1:before,
.airMissile2:before,
.airMissile3:before,
.airMissile4:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgb(53, 1, 177);
}
    .airMissile1:before,
    .airMissile3:before {
        transform: rotate(-45deg);
    }
    .airMissile2:before,
    .airMissile4:before {
        transform: rotate(45deg);
    }
    .airMissile1:before { top:  3px; left:  3px; }
    .airMissile2:before { top:  3px; left: -2px; }
    .airMissile3:before { top: -2px; left: -2px; }
    .airMissile4:before { top: -2px; left:  3px; }


.airMissile1:after,
.airMissile2:after,
.airMissile3:after,
.airMissile4:after {
    content: "";
    position: absolute;
    width: 6px;
    height: 4px;
    border-left: 2px solid rgb(53, 1, 177);
    border-right: 2px solid rgb(53, 1, 177);
}
    .airMissile1:after, .airMissile3:after {
        transform: rotate(-45deg);
    }
    .airMissile2:after, .airMissile4:after {
        transform: rotate(45deg);
    }

    .airMissile1:after { top:  2px; left: -1px; }
    .airMissile2:after { top:  2px; left: -4px; }
    .airMissile3:after { top: -1px; left: -4px; }
    .airMissile4:after { top: -1px; left: -1px; }


.airAmmo {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 5;
}
    .airAmmo .airMissile1 {
        transform: rotate(140deg) skew(10deg, 10deg);
    }

.missile1 .airMissile1,
.missile2 .airMissile2,
.missile3 .airMissile3,
.missile4 .airMissile4 {
    display: none;
}



/**
 * Frost Tower
 */
.frostBody {
    position: absolute;
    top: 1px;
    left: 3px;
    width: 15px;
    height: 18px;
    border: 1px solid rgb(87, 88, 93);
    background: radial-gradient(farthest-corner at 60% 50%, rgb(106, 106, 126), rgb(162, 162, 189));
    border-radius: 10px 6px 6px 10px;
}
.frostTank {
    position: absolute;
    top: 8px;
    left: 12px;
    height: 4px;
    width: 10px;
    background: rgb(251, 251, 254);
    border: solid rgb(176, 176, 250);
    border-width: 1px 0 1px 1px;
    border-radius: 3px 0 0 3px;
}
    .frostTank:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 5px;
        height: 2px;
        width: 8px;
        background: rgb(251, 251, 254);
    }


.frostAmmo {
    display: none;
    position: absolute;
    height: 1px;
    width: 1px;
    background: rgb(72, 125, 108);
    box-shadow: 0 0 5px 3px rgb(72, 125, 108);
}



/**
 * Earthquake Tower
 */
.earthBody {
    position: absolute;
    top: 0;
    left: 1px;
    width: 20px;
    height: 20px;
    border: 1px solid rgb(23, 23, 23);
    border-radius: 10px;
    background: rgb(254, 255, 247);
}
.earthTower {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 16px;
    height: 16px;
    border: 1px solid rgb(187, 189, 183);
    border-radius: 10px;
    background: radial-gradient(closest-side at 30% 30%, rgb(202, 202, 202), rgb(118, 118, 118));
}

.earthAmmo {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    opacity: 0;
    z-index: 0 !important;
    background-image: radial-gradient(black, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6), transparent, rgba(0, 0, 0, 0.5), transparent);
}



/**
 * Ink Tower
 */
.inkBase,
.inkBase:after {
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 8px;
    border: 1px solid rgb(30, 30, 30);
    border-radius: 10px;
    background: linear-gradient(to bottom, rgb(30, 30, 30), rgb(97, 97, 97));
}
    .inkBase:after {
        content: "";
        top: 8px;
        left: -1px;
    }


.inkTank {
    position: absolute;
    top: 8px;
    left: 16px;
    height: 5px;
    width: 7px;
    background: white;
}
    .inkTank:before,
    .inkTank:after {
        content: "";
        position: absolute;
        left: -3px;
        height: 4px;
        width: 10px;
    }
    .inkTank:before {
        top: -3px;
        border-top: 1px solid rgb(92, 92, 91);
        background: linear-gradient(to bottom, rgb(179, 179, 179), white);
        transform: skewY(-20deg);
    }
    .inkTank:after {
        top: 3px;
        border-bottom: 1px solid rgb(92, 92, 91);
        background: linear-gradient(to top, rgb(179, 179, 179), white);
        transform: skewY(20deg);
    }


.inkBody,
.inkBody:before {
    position: absolute;
    border: 1px solid rgb(92, 92, 91);
    background: linear-gradient(to bottom, rgb(179, 179, 179), white);
}
    .inkBody {
        top: 5px;
        left: 4px;
        height: 9px;
        width: 2px;
        border-radius: 10px;
    }
    .inkBody:before {
        content: "";
        top: 1px;
        left: 2px;
        height: 5px;
        width: 6px;
        border-left: none;
        border-right: none;
    }
    .inkBody:after {
        content: "";
        position: absolute;
        top: -3px;
        left: 18px;
        height: 13px;
        width: 1px;
        border: 1px solid rgb(92, 92, 91);
        border-left: none;
        border-radius: 0 2px 2px 0;
        background: rgb(179, 179, 179);
    }


.inkAmmo {
    display: none;
    position: absolute;
    height: 1px;
    width: 1px;
    background: black;
    box-shadow: 0 0 5px 3px black;
}



/**
 * Snap Tower
 */
.snapTL,
.snapTR,
.snapBL,
.snapBR {
    position: absolute;
    width: 7px;
    height: 6px;
    border: 1px solid rgb(57, 58, 57);
}
    .snapTL,
    .snapBR {
        background: rgb(182, 182, 182);
        transform: skew(10deg, 10deg);
    }
    .snapTR,
    .snapBL {
        background: white;
        transform: skew(-10deg, -10deg);
    }
    .snapTL { top:  3px; left:  3px; }
    .snapTR { top:  3px; left: 12px; }
    .snapBL { top: 11px; left:  3px; }
    .snapBR { top: 11px; left: 12px; }


.snapTL:before,
.snapTR:before,
.snapBL:before,
.snapBR:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    border: 1px solid rgb(57, 58, 57);
}
    .snapTL:before,
    .snapBR:before {
        transform: skew(30deg, 30deg);
    }
    .snapTR:before,
    .snapBL:before {
        transform: skew(-30deg, -30deg);
    }


.snapTL:after,
.snapTR:after,
.snapBL:after,
.snapBR:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 2px;
    border: 1px solid black;
    border-width: 0 2px 1px 2px;
}
    .snapTL:after {
        top: -1px;
        left: -3px;
        transform: rotate(-45deg);
    }
    .snapTR:after {
        top: -1px;
        left: 3px;
        transform: rotate(45deg);
    }
    .snapBL:after {
        top: 4px;
        left: -3px;
        transform: rotate(-135deg);
    }
    .snapBR:after {
        top: 4px;
        left: 3px;
        transform: rotate(135deg);
    }


.snapAmmo {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent rgb(57, 58, 57);
    border-style: solid;
    border-width: 3px 12px;
    z-index: 5;
}
    .snapAmmo:after {
        content: "";
        position: absolute;
        top: -2px;
        left: -12px;
        height: 0;
        width: 0;
        border-color: transparent transparent transparent white;
        border-style: solid;
        border-width: 2px 5px;
    }



/**
 * Laser Tower
 */
.laserTank {
    position: absolute;
    top: 10px;
    left: 22px;
    width: 4px;
    height: 1px;
    background: rgb(226, 224, 172);
    border-top: 1px solid rgb(100, 99, 48);
    border-bottom: 1px solid rgb(100, 99, 48);
}
    .laserTank:before,
    .laserTank:after {
        content: "";
        position: absolute;
        width: 1px;
        background: rgb(100, 99, 48);
    }
    .laserTank:before { top: -7px; left: -13px; height: 15px; }
    .laserTank:after  { top: -5px; left:  -9px; height: 11px; }


.laserHead {
    position: absolute;
    top: 10px;
    left: 17px;
    width: 3px;
    height: 3px;
    background: rgb(226, 224, 172);
    border-right: 1px solid rgb(100, 99, 48);
    border-left: 1px solid rgb(100, 99, 48);
}
    .laserHead:after,
    .laserHead:before {
        content: "";
        position: absolute;
        left: -1px;
        width: 3px;
        height: 2px;
        border: 1px solid rgb(100, 99, 48);
    }
    .laserHead:before {
        top: -2px;
        border-bottom: none;
        background: linear-gradient(to bottom, rgb(119, 104, 29), rgb(226, 224, 172));
        transform: skewY(15deg);
    }
    .laserHead:after {
        top: 2px;
        border-top: none;
        background: linear-gradient(to top, rgb(119, 104, 29), rgb(226, 224, 172));
        transform: skewY(-15deg);
    }


.laserBody,
.laserBody:before,
.laserBody:after {
    content: "";
    position: absolute;
    width: 2px;
    border-radius: 0 2px 2px 0;
    border-left: 1px solid rgb(133, 131, 103);
    background: linear-gradient(to bottom, rgb(63, 68, 25) 10%, rgb(253, 247, 195) 50%, rgb(71, 81, 40) 90%);
}
    .laserBody:before { top: -2px; left: -5px; height: 23px; }
    .laserBody        { top:  2px; left: 10px; height: 19px; }
    .laserBody:after  { top:  2px; left:  3px; height: 15px; }


.laserTail {
    position: absolute;
    top: 9px;
    left: 3px;
    height: 6px;
    width: 3px;
    background: rgb(226, 224, 172);
    border-right: 1px solid rgb(100, 99, 48);
}
    .laserTail:before, .laserTail:after {
        content: "";
        position: absolute;
        left: -1px;
        height: 4px;
        width: 3px;
        border: 1px solid rgb(100, 99, 48);
    }
    .laserTail:before {
        top: -3px;
        border-bottom: none;
        background: linear-gradient(to bottom, rgb(119, 104, 29), rgb(226, 224, 172));
        transform: skewY(-30deg);
    }
    .laserTail:after {
        top: 3px;
        border-top: none;
        background: linear-gradient(to top, rgb(119, 104, 29), rgb(226, 224, 172));
        transform: skewY(30deg);
    }


.laserAmmo {
    position: absolute;
    height: 2px;
    width: 540px;
    border: 1px solid rgb(251, 222, 49);
    background: rgb(246, 235, 148);
    opacity: 0.8;
    z-index: 2;
    transform-origin: 0% 50%;
}



/**
 * Boost Tower
 */
.boostZ {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 10px;
    background: radial-gradient(closest-side, rgb(255, 255, 255), rgb(200, 203, 232));
}
.boostX {
    position: absolute;
    top: 0;
    left: 6px;
    width: 10px;
    height: 6px;
    border: 1px solid rgb(189, 154, 176);
    border-bottom: none;
    background: linear-gradient(to bottom, rgb(100, 106, 166), rgb(200, 203, 232));
}
    .boostX:after {
        content: "";
        position: absolute;
        top: 14px;
        left: -1px;
        width: 10px;
        height: 5px;
        border: 1px solid rgb(189, 154, 176);
        border-top: none;
        background: linear-gradient(to top, rgb(100, 106, 166), rgb(200, 203, 232));
    }

.boostY {
    position: absolute;
    top: 6px;
    left: 0;
    width: 5px;
    height: 8px;
    border: 1px solid rgb(189, 154, 176);
    border-right: none;
    background: linear-gradient(to right, rgb(100, 106, 166), rgb(200, 203, 232));
}
    .boostY:after {
        content: "";
        position: absolute;
        top: -1px;
        left: 17px;
        width: 5px;
        height: 8px;
        border: 1px solid rgb(189, 154, 176);
        border-left: none;
        background: linear-gradient(to left, rgb(100, 106, 166), rgb(200, 203, 232));
    }