div.player {
  left: 5px;
  width: 410px;
  height: 200px;
  background-color: black;
  border: 1px solid white;
  overflow: hidden;
  z-index: 2;
}
div.player:hover, div.player.me.hover {
  width: 1903px;
}
div#player0 {
  top: 5px;
}
div#player0.passed {
  top: 45px;
}
div#player1 {
  top: 212px;
}
div#player1.passed {
  top: 252px;
}
div#player2 {
  top: 419px;
}
div#player2.passed {
  top: 459px;
}
div#player3 {
  top: 626px;
}
div#player3.passed {
  top: 666px;
}

div.turnmarker {
  display: none;
  width: 170px;
  height: 170px;
  left: -1px;
  bottom: -1px;
  background-color: white;
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
div.player.currentturn > div.turnmarker {
  display: block;
}

div.leechermarker {
  display: none;
  width: 170px;
  height: 170px;
  left: -1px;
  bottom: -1px;
  background-color: #b200ff;
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
div.player.leecherleft > div.leechermarker {
  display: block;
}

/* Planets */

div.player > div.playerplanet.main {
  left: 5px;
  top: 5px;
}
div.player > div.playerplanet {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: none;
}
div.player.me:hover > div.playerplanet:not(.main) { display: none; }

div.player > div.playerplanet:not(.main) > div.text {
  font-size: 18px;
}

div.player > div.playerterraimage {
  width: 38px;
  height: 16px;
  left: 344px;
  bottom: 82px;
  background-size: auto 100%;
}
div.player.me:hover > div.playerterraimage { display: none; }
div.player > div.playername {
  left: 35px;
  top: 5px;
  width: 300px;
  height: 30px;
  text-align: left;
}

/* Resources and Free Actions */

div.player > div.bowlgaia {
  left: 0px;
  bottom: 0px;
  width: 120px;
  height: 150px;
  border-radius: 80px 0 0 80px;
  background-color: lime;
  border: 5px solid black;
}
div.player > div.bowlgaia > div.text {
  left: 0px;
  top: 63px;
  width: 44px;
  height: 24px;
  text-align:center;
  color: black;
}
div.player > div.bowlI {
  left: 45px;
  bottom: 0px;
  width: 75px;
  height: 75px;
  border-radius: 0 0 0 80px;
  background-color: #b200ff;
  border: 5px solid black;
}
div.player.me:hover > div.bowlI.activated:hover { background-color: #d37cff; } /* Not Xenos */
div.player > div.bowlI > div.text {
  left: 20px;
  top: 20px;
  width: 44px;
  height: 24px;
  text-align:center;
  color: white;
}
div.player > div.bowlII {
  left: 45px;
  bottom: 75px;
  width: 75px;
  height: 75px;
  border-radius: 80px 0 0 0;
  background-color: #b200ff;
  border: 5px solid black;
}
div.player.me:hover > div.bowlII.activated:hover { background-color: #d37cff; }
div.player > div.bowlII > div.text {
  left: 20px;
  top: 35px;
  width: 44px;
  height: 24px;
  text-align: center;
  color: white;
}
div.player > div.bowlIII {
  left: 125px;
  bottom: 0px;
  width: 75px;
  height: 150px;
  text-align: center;
  border-radius: 0 80px 80px 0;
  background-color: #b200ff;
  border: 5px solid black;
}
div.player.me:hover > div.bowlIII {
  width: 70px;
  border-radius: 0;
}
div.player.me:hover > div.bowlIII.activated:hover { background-color: #d37cff; }
div.player > div.bowlIII > div.text {
  left: 13px;
  top: 63px;
  width: 44px;
  height: 24px;
  text-align: center;
  color: white;
}
div.player.me:hover > div.bowlIII > div.text { top: 85px; }
div.player > div.freeaction { display: none; }
div.player.me:hover > div.freeaction { display: block; }
div.player > div.bowlIII > div.credit { top: 14px; left: 12px; display: none; }
div.player > div.bowlIII > div.credittext {
  left: 33px;
  top: 13px;
  width: 30px;
  color: #ffd800;
  text-align: center;
  display: none;
}
div.player.me:hover > div.bowlIII > div.credit { display: block; }
div.player.me:hover > div.bowlIII > div.credit.activated:hover { background-color: #d37cff; }
div.player.me:hover > div.bowlIII > div.credittext { display: block; }
div.player > div.power2ore {
  top: 45px;
  left: 200px;
  width: 70px;
  height: 48px;
  background-color: #b200ff;
}
div.player.me:hover > div.power2ore.activated:hover { background-color: #d37cff; }
div.player > div.power2ore div.ore { top: 14px; left: 12px; }
div.player > div.power2ore div.oretext {
  left: 33px;
  top: 13px;
  width: 30px;
  color: white;
  text-align: center;
}
div.player > div.power2knowledge {
  top: 96px;
  left: 200px;
  width: 70px;
  height: 48px;
  background-color: #b200ff;
}
div.player.me:hover > div.power2knowledge.activated:hover { background-color: #d37cff; }
div.player > div.power2knowledge div.knowledge { top: 14px; left: 12px;}
div.player > div.power2knowledge div.knowledgetext {
  left: 33px;
  top: 13px;
  width: 30px;
  color: #0094ff;
  text-align: center;
}
div.player > div.power2qic {
  top: 147px;
  left: 200px;
  width: 70px;
  height: 48px;
  background-color: #b200ff;
}
div.player.me:hover > div.power2qic.activated:hover { background-color: #d37cff; }
div.player > div.power2qic > div.qic { top: 14px; left: 12px; }
div.player > div.power2qic > div.qictext {
  left: 33px;
  top: 13px;
  width: 30px;
  color: #00c421;
  text-align: center;
}
div.player > div.powercharge { left: 190px; bottom: 132px; }
div.player.me:hover > div.powercharge { display: none; }
div.player > div.powerchargetext {
  left: 210px;
  bottom: 129px;
  color: #b200ff;
  text-align: left;
}
div.player.me:hover > div.powerchargetext { display: none; }
div.player > div.powertoken { left: 268px; bottom: 132px; }
div.player.me:hover > div.powertoken { display: none; }
div.player > div.powertokentext {
  left: 288px;
  bottom: 129px;
  color: #b200ff;
  text-align: left;
}
div.player.me:hover > div.powertokentext { display: none; }
div.player > div.credit { left: 214px; bottom: 102px; }
div.player.me:hover > div.credit { display: none; }
div.player > div.credittext {
  left: 244px;
  bottom: 99px;
  color: #ffd800;
  text-align: left;
}
div.player.me:hover > div.credittext { display: none; }
div.player > div.ore { left: 214px; bottom: 72px; }
div.player.me:hover > div.ore { display: none; }
div.player > div.oretext {
  left: 244px;
  bottom: 69px;
  color: white;
  text-align: left;
}
div.player.me:hover > div.oretext { display: none; }
div.player > div.knowledge { left: 214px; bottom: 42px; }
div.player.me:hover > div.knowledge { display: none; }
div.player > div.knowledgetext {
  left: 244px;
  bottom: 39px;
  color: #0094ff;
  text-align: left;
}
div.player.me:hover > div.knowledgetext { display: none; }
div.player > div.qic { left: 214px; bottom: 12px; }
div.player.me:hover > div.qic { display: none; }
div.player > div.qictext {
  left: 244px;
  bottom: 9px;
  color: #00c421;
  text-align: left;
}
div.player.me:hover > div.qictext { display: none; }

div.player > div.ore2credit {
  left: 273px;
  top: 45px;
  width: 60px;
  height: 48px;
}
div.player.me:hover.Xenos > div.ore2credit { display: none; }
div.player.me:hover > div.ore2credit.activated:hover { background-color: gray; }
div.player > div.ore2credit > div.text {
  left: 8px;
  top: 13px;
}
div.player > div.ore2credit > div.credit {
  left: 32px;
  top: 14px;
}
div.player > div.knowledge2credit {
  left: 273px;
  top: 96px;
  width: 60px;
  height: 48px;
}
div.player.me:hover > div.knowledge2credit.activated:hover { background-color: gray; }
div.player > div.knowledge2credit > div.text {
  left: 8px;
  top: 13px;
}
div.player > div.knowledge2credit > div.credit {
  left: 32px;
  top: 14px;
}
div.player > div.qic2ore {
  left: 273px;
  top: 147px;
  width: 60px;
  height: 48px;
}
div.player.me:hover > div.qic2ore.activated:hover { background-color: gray; }
div.player > div.qic2ore > div.text {
  left: 8px;
  top: 13px;
}
div.player > div.qic2ore > div.ore {
  left: 32px;
  top: 14px;
}
div.player > div.credit2ore {
  left: 336px;
  top: 45px;
  width: 69px;
  height: 48px;
}
div.player.me:not(.HadschHallasPI) > div.credit2ore { display: none; }
div.player.me:hover > div.credit2ore.activated:hover { background-color: gray; }
div.player > div.credit2ore > div.ore {
  left: 4px;
  top: 14px;
}
div.player > div.credit2ore > div.text {
  left: 25px;
  top: 13px;
}
div.player > div.credit2ore > div.credit {
  left: 46px;
  top: 14px;
}
div.player > div.credit2knowledge {
  left: 336px;
  top: 96px;
  width: 69px;
  height: 48px;
}
div.player.me:not(.HadschHallasPI) > div.credit2knowledge { display: none; }
div.player.me:hover > div.credit2knowledge.activated:hover { background-color: gray; }
div.player > div.credit2knowledge > div.knowledge {
  left: 4px;
  top: 14px;
}
div.player > div.credit2knowledge > div.text {
  left: 25px;
  top: 13px;
}
div.player > div.credit2knowledge > div.credit {
  left: 46px;
  top: 14px;
}
div.player > div.credit2qic {
  left: 336px;
  top: 147px;
  width: 69px;
  height: 48px;
}
div.player.me:not(.HadschHallasPI) > div.credit2qic { display: none; }
div.player.me:hover > div.credit2qic.activated:hover { background-color: gray; }
div.player > div.credit2qic > div.qic {
  left: 4px;
  top: 14px;
}
div.player > div.credit2qic > div.text {
  left: 25px;
  top: 13px;
}
div.player > div.credit2qic > div.credit {
  left: 46px;
  top: 14px;
}

div.player > div.gaiaformer2qic {
  left: 336px;
  top: 45px;
  width: 69px;
  height: 150px;
}
div.player.me:not(.BalTaks) > div.gaiaformer2qic { display: none; }
div.player.me:hover > div.gaiaformer2qic.activated:hover { background-color: gray; }
div.player > div.gaiaformer2qic > div.gaiaformer {
  left: 16px;
  top: 19px;
}
div.player > div.gaiaformer2qic > div.text {
  left: 25px;
  top: 63px;
}
div.player > div.gaiaformer2qic > div.qic {
  left: 25px;
  top: 104px;
}

div.player > div.ore2chargedpwt {
  left: 273px;
  top: 45px;
  width: 60px;
  height: 48px;
}
div.player.me:not(.Xenos) > div.ore2chargedpwt { display: none; }
div.player.me:hover > div.ore2chargedpwt.activated:hover { background-color: gray; }
div.player > div.ore2chargedpwt > div.text {
  left: 8px;
  top: 13px;
}
div.player > div.ore2chargedpwt > div.powertoken {
  left: 30px;
  top: 14px;
}

div.player > div.chargedtoken2knowledge {
  left: 336px;
  top: 45px;
  width: 69px;
  height: 150px;
}
div.player.me:not(.Nevlas) > div.chargedtoken2knowledge { display: none; }
div.player.me:hover > div.chargedtoken2knowledge.activated:hover { background-color: gray; }
div.player > div.chargedtoken2knowledge > div.powertoken {
  left: 24px;
  top: 23px;
}
div.player > div.chargedtoken2knowledge > div.text {
  left: 25px;
  top: 63px;
}
div.player > div.chargedtoken2knowledge > div.knowledge {
  left: 25px;
  top: 104px;
}

/* Buildings */

div.player > div.buildingswrapper {
  left: 417px;
  height: 200px;
  width: 300px;
}
div.player > div.buildingswrapper > div.PI {
  left: 60px;
  top: 8px;
  width: 54px;
  height: 50px;
  background-image: url('PI.png');
  background-size: 100%;
}
div.player > div.buildingswrapper > div.PI.Bescods { left: 218px; }
div.player > div.buildingswrapper > div.A {
  width: 44px;
  height: 46px;
  background-image: url('A.png');
  background-size: 100%;
}
div.player > div.buildingswrapper > div.kA { left: 200px; top: 10px; }
div.player > div.buildingswrapper > div.kA.Bescods { left: 42px; }
div.player > div.buildingswrapper > div.qA { left: 250px; top: 10px; }
div.player > div.buildingswrapper > div.qA.Bescods { left: 92px; }
div.player > div.buildingswrapper > div.TS {
  width: 35px;
  height: 42px;
  background-image: url('TS.png');
  background-size: 100%;
}
div.player > div.buildingswrapper > div.TS1 { left: 10px; top: 65px; }
div.player > div.buildingswrapper > div.TS2 { left: 50px; top: 65px; }
div.player > div.buildingswrapper > div.TS3 { left: 90px; top: 65px; }
div.player > div.buildingswrapper > div.TS4 { left: 130px; top: 65px; }
div.player > div.buildingswrapper > div.RL {
  width: 39px;
  height: 42px;
  background-image: url('RL.png');
  background-size: 100%;
}
div.player > div.buildingswrapper > div.RL1 { left: 180px; top: 65px; }
div.player > div.buildingswrapper > div.RL2 { left: 225px; top: 65px; }
div.player > div.buildingswrapper > div.RL3 { left: 270px; top: 65px; }
div.player > div.buildingswrapper > div.M {
  width: 31px;
  height: 35px;
  background-image: url('M.png');
  background-size: 100%;
}
div.player > div.buildingswrapper > div.M1 { left: 5px; top: 116px; }
div.player > div.buildingswrapper > div.M2 { left: 45px; top: 116px; }
div.player > div.buildingswrapper > div.M3 { left: 85px; top: 116px; }
div.player > div.buildingswrapper > div.M4 { left: 125px; top: 116px; }
div.player > div.buildingswrapper > div.M5 { left: 165px; top: 116px; }
div.player > div.buildingswrapper > div.M6 { left: 205px; top: 116px; }
div.player > div.buildingswrapper > div.M7 { left: 245px; top: 116px; }
div.player > div.buildingswrapper > div.M8 { left: 285px; top: 116px; }
div.player > div.buildingswrapper > div.gaiaformer1 { left: 5px; top: 160px; }
div.player > div.buildingswrapper > div.gaiaformer2 { left: 50px; top: 160px; }
div.player > div.buildingswrapper > div.gaiaformer3 { left: 95px; top: 160px; }
div.player > div.buildingswrapper > div.shuttle1 { left: 290px; top: 160px; }
div.player > div.buildingswrapper > div.shuttle2 { left: 260px; top: 160px; }
div.player > div.buildingswrapper > div.shuttle3 { left: 230px; top: 160px; }

/* Booster */

div.player > div.booster {
  left: 745px;
  top: 5px;
}

/* Fed & Artifacts */

div.player > div.fedartifactspecialactionwrapper {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  left: 820px;
  max-width: 1082px;
  width: auto;
  height: 102px;
}
div.player > div.fedartifactspecialactionwrapper > div.fed {
  position: relative;
  top: 15px;
}
div.player.me > div.fedartifactspecialactionwrapper > div.fed.activated:hover {
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}
div.player > div.fedartifactspecialactionwrapper > div.artifact {
  position: relative;
  top: 6px;
}
div.player > div.fedartifactspecialactionwrapper > div.specialactionwrapper {
  position: relative;
  top: 30px;
  width: 60px;
}
div.player > div.fedartifactspecialactionwrapper > div.specialactionwrapper > div.text {
  font-size: 16px;
  bottom: 82px;
  width: 60px;
  text-align: center;
}
div.player > div.fedartifactspecialactionwrapper > div.specialactionwrapper > div.action.specialaction {
  top: 20px;
}
div.player.me:hover > div.fedartifactspecialactionwrapper > div.specialactionwrapper > div.action.specialaction.activated:hover:not(.done) { background-color: #f09c6a; }

/* Special Actions */

div.action.specialaction.faction_2range > div.text {
  font-size: 16px;
  left: 7px;
  top: 10px;
}
div.action.specialaction.faction_2range > div.text > div.range {
  left: 20px;
  top: -2px;
}
div.action.specialaction.faction_advancelowesttrack {
  background-image: url('advancelowesttrack.png');
  background-size: 64% !important;
}
div.action.specialaction.faction_2terra {
  background-image: url('twoterra.png');
  background-size: 65% !important;
}
div.action.specialaction.PI_exchange {
  background-image: url('exchange.png');
  background-size: 80% !important;
}
div.action.specialaction.PI_spacestation {
  background-image: url('spacestation.png');
  background-size: 60% !important;
}
div.action.specialaction.PI_downgrade {
  background-image: url('downgrade.png');
  background-size: 80% !important;
}
div.action.specialaction.PI_powerring {
  background-image: url('powerring.png');
  background-size: 60% !important;
}
div.action.specialaction.PI_4pw > div.text {
  font-size: 16px;
  top: 10px;
  left: 14px;
}
div.action.specialaction.PI_4pw > div.text > div.powercharge {
  top: 1px;
  left: 12px;
}
div.action.specialaction.PI_1terra {
  background-image: url('oneterra.png');
  background-size: 40% !important;
}
div.action.specialaction.PI_q div.qic {
  left: 21px;
  top: 10px;
}
div.action.specialaction.PI_3k > div.text {
  font-size: 16px;
  top: 10px;
  left: 14px;
}
div.action.specialaction.PI_3k > div.text > div.knowledge {
  top: 0px;
  left: 12px;
}
div.action.specialaction.PI_3terra {
  background-image: url('threeterra.png');
  background-size: 85% !important;
}
div.action.specialaction.PI_2q > div.text {
  font-size: 16px;
  top: 10px;
  left: 16px;
}
div.action.specialaction.PI_2q > div.text > div.qic {
  top: 0px;
  left: 12px;
}
div.action.specialaction.A_q div.qic {
  left: 21px;
  top: 10px;
}
div.action.specialaction.A_4c div.text {
  font-size: 16px;
  top: 10px;
  left: 14px;
}
div.action.specialaction.A_4c > div.text > div.credit {
  top: -1px;
  left: 12px;
}
div.action.specialaction.tech_4pw > div.text {
  font-size: 16px;
  top: 10px;
  left: 14px;
}
div.action.specialaction.tech_4pw > div.text > div.powercharge {
  top: 1px;
  left: 12px;
}
div.action.specialaction.adv_1q5c > div.text {
  font-size: 16px;
  top: 10px;
  left: 0px;
}
div.action.specialaction.adv_1q5c > div.text > div.qic {
  top: -1px;
  left: 8px;
}
div.action.specialaction.adv_1q5c > div.text > div.credit {
  top: -1px;
  left: 38px;
}
div.action.specialaction.adv_3k > div.text {
  font-size: 16px;
  top: 10px;
  left: 14px;
}
div.action.specialaction.adv_3k > div.text > div.knowledge {
  top: 0px;
  left: 12px;
}
div.action.specialaction.adv_3o > div.text {
  font-size: 16px;
  top: 10px;
  left: 14px;
}
div.action.specialaction.adv_3o > div.text > div.ore {
  top: -1px;
  left: 12px;
}
div.action.specialaction.booster_instant {
  background-image: url('instagaiaform.png');
  background-size: 60% !important;
}
div.action.specialaction.booster_range > div.text {
  font-size: 16px;
  left: 7px;
  top: 10px;
}
div.action.specialaction.booster_range > div.text > div.range {
  left: 20px;
  top: -2px;
}
div.action.specialaction.booster_terra {
  background-image: url('oneterra.png');
  background-size: 40% !important;
}




/* Tech tiles */

div.player > div.techwrapper {
  display: flex;
  justify-content: flex-start;
  gap: 3px;
  left: 820px;
  top: 102px;
  max-width: 1082px;
  width: auto;
  height: 98px;
}
div.player > div.techwrapper > div.tech {
  position: relative;
  top: 5px;
}
div.player.me:hover > div.techwrapper > div.tech.activated:hover {
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}
div.player > div.techwrapper > div.tech > div.advtech {
  position: absolute;
  width: 79%;
  height: 79%;
  top: 8px;
  left: 7px;
}
div.player > div.techwrapper > div.tech:hover > div.advtech { display: none; }