pieces.css

/* Style for individual piece tiles. */
/* --------------------------------- */

.cargoship {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

.warship {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

.catamaran {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}


.detail.cargo {
    display: inline-block;
    margin: 0px;
    transform: rotate(0deg) scale(0.1,2.4) translateX(-60px) translateY(0);
    border-right: 5px solid rgb(89, 53, 20);
    border-left: 5px solid rgb(89, 53, 20);
    margin: 0px 0px 2px 1px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: white;
}


/* Hut */
.square.hut {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgb(230, 230, 0);
    background-color: rgb(77, 210, 55);
}

.piece.hut {
    display: inline-block;
    padding: 0px;
    background-color: rgb(77, 210, 55);
    transform: scale(0.6,0.6);
    border: 2px solid rgb(89, 53, 20);
    border-radius: 10%;
}

.detail.hut{
  background-color: rgb(89, 53, 20);
  transform: scale(1.3,0.1);
}

/* Desert */
.desert {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

/* Quarry */
.quarry {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

/* Plantation */
.plantation {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

/* Flax */
.flax {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

/* Clay */
.clay {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

/* Whirlpool */
.whirlpool {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}



.goodsGroup {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}

/* Fort */
.fort {
    position: absolute;
    background-color: transparent;
    fill: lightgrey;
    z-index: 10;
}

.square.fort {
    display: inline-block;
    position: relative;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    border: 1px solid rgb(230, 230, 0);
    background-color: rgb(77, 210, 55);
}

.holding.fort {
    display: inline-block;
    position: relative;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: transparent;
    border-radius: 50%;
}

.piece.fort {
    display: inline-block;
    position: relative;
    transform: scale(0.55,0.55) translate(0%, 0%);
    background-color: rgb(77, 210, 55);
    border: 2px solid rgb(89, 53, 20);
    border-radius: 15%;
}

.piece.fort::before {
    content:'';
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
    background-color: rgb(89, 53, 20);
    border: 4px solid rgb(89, 53, 20);
    transform: translate(-50%, -50%) scale(0.3, 0.3);
    border-radius: 50%;
}

.piece.fort::after {
    content:'';
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
    background-color: rgb(89, 53, 20);
    border: 4px solid rgb(89, 53, 20);
    transform: translate(20%, -230%) scale(0.3, 0.3);
    border-radius: 50%;
}

.detail.fort{
    display: inline-block;
    position: relative;
    background-color: rgb(89, 53, 20);
    border: 4px solid rgb(89, 53, 20);
    transform: translate(-50%, -100%) scale(0.3, 0.3);
    border-radius: 50%;
}

.detail.fort::after{
    /* cannon */
    content:'';
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    background-color: silver;
    border-top-left-radius: 50%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 20%;
    border: 3px solid rgb(89, 53, 20);
    transform: translate(220%, -250%) rotate(-45deg) scale(2, 1);
}

/* forests */

.forest {
    position: absolute;
    background-color: transparent;
    fill: rgb(77, 210, 55);
    z-index: 10;
}

.square.forest {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgb(230, 230, 0);
    background-color: rgb(77, 210, 55);
}

.piece.forest {
    display: inline-block;
    padding: 0px;
    background-color: rgb(77, 210, 55);
    transform: scale(0.5, 0.5) translate(20%, -20%);
    border: 2px solid rgb(89, 53, 20);
    border-radius: 50%;
}

.piece.forest::before, .detail.forest::before {
    content: '';
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 0px;
    background-color: rgb(89, 53, 20);
    transform: translate(-10%, 60%) scale(0.2,0.5);
    border: 2px solid rgb(89, 53, 20);
}

.detail.forest {
  display: inline-block;
  padding: 0px;
  background-color: limegreen;
  transform: translate(-60%, -110%) scale(0.8, 0.8);
  border: 2px solid rgb(89, 53, 20);
  border-radius: 50%;
}

/* ironworks */

.ironworks {
    position: absolute;
    background-color: transparent;
    fill: rgb(77, 210, 55);
    z-index: 10;
}

.square.ironworks {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgb(230, 230, 0);
    background-color: rgb(77, 210, 55);
}

.piece.ironworks {
    display: inline-block;
    padding: 0px;
    background-color: silver;
    transform:  translate(0%, 50%) scale(1, 1.4) rotate(45deg);
    border: 1px solid rgb(89, 53, 20);
    border-radius: 10%;
}

.detail.ironworks {
    display: inline-block;
    padding: 0px;
    background-color: silver;
    border-top: 2px solid rgb(89, 53, 20);
    border-bottom: 2px solid rgb(89, 53, 20);
    border-left: 2px solid rgb(89, 53, 20);
    border-right: 2px solid rgb(89, 53, 20);

    transform: translate(-20%, -20%)  rotate(-45deg) scale(0.4, 0.3);
    border-radius: 10%;
}

.detail.ironworks::after {
    content: 'I';
    color: darkslategrey;
    font-size: 1em;
    height: 100%;
    width: 100%;
    display: inline-block;
    padding: 0px;
    background-color: silver;
    transform: translate(0%, 0%) scale(0.8,0.8);
    border: 0;
}

/* ironworks */
.square.quarry {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgb(230, 230, 0);
    background-color: rgb(77, 210, 55);
}

.piece.quarry {
    display: inline-block;
    padding: 0px;
    background-color: rgb(89, 53, 20);
    transform:  rotate(45deg) translate(-5%, -18%) scale(0.9, 0.15) ;
    border-top: 5px solid rgb(89, 53, 20);
    border-bottom: 5px solid rgb(89, 53, 20);
    border-left: 1px solid rgb(89, 53, 20);
    border-right: 1px solid rgb(89, 53, 20);
    border-radius: 20%;
}

.detail.quarry {
    display: inline-block;
    padding: 0px;
    background-color: silver;
    border: 5px solid rgb(89, 53, 20);
    transform: translate(-38%, -15%) scale(0.1, 3) rotate(45deg);
    border-radius: 20%;
}

.piece.quarry::after {
    content: '';
    font-size: 1em;
    height: 100%;
    width: 100%;
    display: inline-block;
    padding: 0px;
    background-color: rgb(255, 253, 208);
    border: 2px solid rgb(89, 53, 20);
    transform:  translate(-10%, 140%) scale(0.4, 2.4) rotate(45deg);
    border-radius: 20%;
}








/* Team colours */
.Blue.team_fill {
    background-color: #0099cc;
    fill: #0099cc;
}

.Blue.team_stroke {
    color: #0099cc;
    stroke: #00394d;
}

.Blue.team_route {
    stroke: #0099cc;
}


.Orange.team_fill  {
    background-color: #bd5d0f;
    fill: #bd5d0f;
}

.Orange.team_stroke {
    color: #bd5d0f;
    stroke: #472306;
}

.Orange.team_route {
    stroke: #bd5d0f;
}

.Red.team_fill {
    background-color: #a52746;
    fill: #a52746;
}

.Red.team_stroke {
    color: #a52746;
    stroke: #3e0f1a;
}

.Red.team_route {
    stroke: #a52746;
}

.Green.team_fill {
    background-color: #34987d;
    fill: #34987d;
}

.Green.team_stroke {
    color: #34987d;
    stroke: #14392f;
}

.Green.team_route {
    stroke: #34987d;
}

.Kingdom.team_stroke {
    stroke: #251934;
}

.Kingdom.team_fill {
    background-color: rgb(162, 236, 246);
    fill: #7851a9;
}

.Pirate.team_fill {
    background-color: #353839;
    fill: #353839;
}

.Pirate.team_stroke {
    stroke: black;
}

.Unclaimed.team_stroke {
    stroke: rgb(138, 87, 50);
}

.Unclaimed.team_fill {
    fill: rgb(235, 215, 195);
}

.Deserted.team_stroke {
    stroke: grey;
}

.Deserted.team_fill {
    fill: grey;
}

.deg90 {
    transform: rotate(90deg);
    transition: transform 1s;
}