:root {
  --white: #ffffff;
  --black: #000;
  --light-grey: #d3d3d3;
  --light-blue: #add8e6;
  --yellow: #ffff00;
  --border-color: #b3d9ff;

  /* rarity colors */
  --common-color: #d3d3d3;
  --rare-color: #7fc0ff;
  --epic-color: #c47efe;
  /* --legendary-color: #ff6600; */
  --legendary-color: #fecc7e;
  --elite-color: #f8e089;

  /* rarity border colors */
  --common-border-color: #edf0d3;
  --epic-border-color: #ddb0fe;
  /* --legendary-border-color: #ff7300; */
  --legendary-border-color: #ffe2af;
  --elite-border-color: #fdfd89;

  /* standard faction color */
  --faction-color: #b3d9ff;
  --syndicate-color: #710d08;
  /* exotic icons faction colors */
  --drachian-color: #7aa870;
  /* temporary exotic faction colors for testing purpose */
  --nomad-color: #1e88ac;
  --rebel-color: #ee896e;
  --suntek-color: #d8b2b7;
  --fleshCult-color: #f0dadd;
  --inquisition-color: #df5359;
  --scavengers-color: #ab461c;
  /* --genetician-color: #a057dd; */
--genetician-color: #c0cedd;

  --kageDivision-color: #ffffff;
  
  /* levels and experience bars colors */
  --level-inside-color: #b3d9ff;
  --level-outside-border-color: #8aa6c5;

  /* bottom icons colors */
  --brown-icon-inside-color: #bb8d1c;
  --brown-icon-outside-border-color: #906d1b;

  --orange-icon-inside-color: #be5d16;
  --orange-icon-outside-border-color: #934917;

  /* stats rectangles colors */
  --yellow-stats-rect-fill-color: #b8901a;
  --orange-stats-rect-fill-color: #c35c19;

  /* card dimensions */
  --card-height: 40vh;
  --card-width: calc(var(--card-height) / (900 / 570)); /*  1.5789 new card-width to compensate new card format */

  /* square box size for score & faction */
  --box-size: calc(var(--card-height) / 14);
  --beta-border-height: calc(var(--card-height) / 183);

  /* exotic faction size */
  --exotic-faction-icon-size: calc(var(--card-height) / 8);

  /* square box positioning */
  --faction-bottom-margin: 15.9%;
  /* --gap-between-boxes: 2.5%; */ /* --score-bottom-margin: calc(var(--faction-bottom-margin) + var(--box-size) + var(--gap-between-boxes)); */
  --score-bottom-margin: calc(var(--faction-bottom-margin) + var(--box-size) + 5.3%); /* 24.968% */
  --horizontal-line-bottom-margin: calc(var(--box-size) / 2 + var(--faction-bottom-margin));

  --betaCard_elite-star-size: calc(var(--card-height) / 27);

  /* bottom bar statistic rectangles size  */
  --stat-rectangle-size: calc(var(--card-height) / 100);
  --betaCard_stats-rectangles-container-gap: calc(var(--card-height) / 350);

  /* filled rectangles :
  fill color #bb8d1c
  border color #795b18 */
}

@font-face {
  font-family: "cascadia";
  src: url(../fonts/Cascadia.ttf);
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "cascadia";
}

.betaCard_beta-cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.betaCard_beta-card {
  /* background-image: url(../betaCard_img/background_picture_savior.png); */ /* moved to inline style to populate with js*/
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: var(--card-height);
  width: var(--card-width);
  position: relative;
  box-sizing: border-box;
  border-radius:1vh;
}

/* grid overlay image */
.betaCard_beta-grid-overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity:0.76;
  height: calc(var(--card-height));
  background-image: url("https://exode.io/resources/betaCard_img/card_part_backgroundLayer_cyber_03.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
  border-radius:1vh;
}

.betaCard_beta-side-bar-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://exode.io/resources/betaCard_img/backgroundLayer_greyBar.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
  border-radius:1vh;
}

.betaCard_beta-card-score {
  position: absolute;
  left: 0;
  bottom: var(--score-bottom-margin);
  width: var(--box-size);
  height: var(--box-size);
  border-width: var(--beta-border-height);
  border-style: solid;
  border-left: none;

  /* score style & positioning  */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-shadow: 2px 2px 1px rgb(0, 0, 0);
  font-size: calc(var(--card-height) / 23);
  font-weight: bold;
}
.betaCard_beta-card-score.common {
  background-color: var(--common-color);
  border-color: var(--common-border-color);
}
.betaCard_beta-card-score.rare {
  background-color: var(--rare-color);
  border-color: var(--border-color);
}
.betaCard_beta-card-score.epic {
  background-color: var(--epic-color);
  border-color: var(--epic-border-color);
}
.betaCard_beta-card-score.legendary {
  background-color: var(--legendary-color);
  border-color: var(--legendary-border-color);
}

.betaCard_beta-card-faction-logo {
  position: absolute;
  left: 0;
  bottom: var(--faction-bottom-margin);
  width: var(--box-size);
  height: var(--box-size);
  border: var(--beta-border-height) solid var(--border-color);
  border-left: none;
  background-color: var(--black);

  /* faction logo */
  /* background-image: url(https://exode.io/resources/betaCard_img/faction_logo/faction_civilian_96.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; */
}
.betaCard_beta-card-faction-logo .betaCard_beta-card-faction-logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 91%; /* logo size */
}

/* exotic faction logo container */
.betaCard_beta-card-exotic-faction-logo {
  position: absolute;
  left: 0%;
  bottom: calc(var(--exotic-faction-icon-size) + 1%);
  width: var(--exotic-faction-icon-size);
  height: var(--exotic-faction-icon-size);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}
.betaCard_beta-card-exotic-faction-logo.html {
  background-image: url(https://exode.io/resources/betaCard_img/factionIcons/exoticFaction_genetician_256.png);
}

/* bottom opacity screen */
.betaCard_bottom-opacity-screen {
  /* position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--card-height) / 5);
  background-color: rgba(0, 0, 0, 0.8); */

  /* updated for stock image */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity:0.85;
  height: calc(var(--card-height));
  background-image: url("https://exode.io/resources/betaCard_img/card_part_backgroundLayer_optional_blackBottom.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

/* overlay z-index */
.betaCard_beta-card-score,
.betaCard_beta-card-faction-logo,
.betaCard_beta-card-title,
.betaCard_beta-card-description {
  z-index: 1; /*  to place above black screen & grid screen */
}

/* horizontal line */
.betaCard_faction-horizontal-line {
  position: absolute;
  right: 0;
  bottom: calc(var(--box-size) / 2 + var(--faction-bottom-margin)); /* 15.3% is the margin bottom for .betaCard_beta-card-faction-logo */
  width: 100%;
  height: var(--beta-border-height);
  background-color: var(--faction-color); /* changed to --faction color to adjust exotic faction color schemes for EXP & levels as well */
}

.betaCard_beta-card-title-container {
  display: flex;
  align-items: center;
  position: absolute;
  right: calc(var(--card-height) / 30);
  bottom: calc(var(--box-size) / 2 + 17%);
  text-transform: uppercase;
  font-size: calc(var(--card-height) / 33);
  font-weight: 600;
  color: var(--white);
}
.betaCard_beta-card-title {
  display: flex;
  align-items: center;
  gap: calc(var(--card-height) / 35);
  text-shadow: 2px 2px 1px rgb(0, 0, 0);
}
.betaCard_exotic-card-title-container {
  display: flex;
  align-items: center;
  position: absolute;
  right: calc(var(--card-height) / 30);
  bottom: calc(var(--box-size) / 2 + 17%);
  text-transform: uppercase;
  font-size: calc(var(--card-height) / 33);
  font-weight: 600;
  color: var(--faction-color);
  z-index: 1;
  opacity: 0.4;
  filter: brightness(180%);
}
.betaCard_exotic-card-title {
  display: flex;
  align-items: center;
  gap: calc(var(--card-height) / 35);
  text-shadow: 2px 2px 1px rgb(0, 0, 0);
}
.betaCard_beta-card-description {
  position: absolute;
  top: calc(var(--card-height) / 1.23);
  right: calc(var(--card-height) / 29); /* changed right to compensate extra space '&nbsp' in formatDescriptionTable function  calc(var(--card-height) / 50); without extra space / 29 */
  font-size: calc(var(--card-height) / 58);
  color: var(--white);
  text-align: right;
  max-width: calc(var(--card-height) / );
  word-wrap: break-word;
  line-height: 1.5;
}

/* is upgradable container */
.betaCard_upgradable-container {
  position: relative;
  /* right: calc(var(--card-height) / 80); */
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--card-height) / 120);
  align-items: center;
}
.betaCard_upgradable-text {
  text-transform: capitalize;
  font-size: calc(var(--card-height) / 60);
  color: var(--orange-icon-inside-color);
}
.betaCard_upgradable-array-container {
  display: flex;
  justify-content: flex-start;
  gap: calc(var(--card-height) / 280);
  align-items: center;
  color: var(--orange-icon-inside-color);
  font-size: calc(var(--card-height) / 55);
}
.betaCard_upgradable-rectangle {
  box-sizing: border-box;
  width: var(--stat-rectangle-size);
  height: var(--stat-rectangle-size);
  background-color: transparent;
  border: calc(var(--card-height) / 462) solid var(--orange-icon-outside-border-color);
}
.betaCard_upgradable-rectangle.filled {
  background-color: var(--orange-stats-rect-fill-color);
}
.betaCard_upgradable-bracket {
  margin: 0 calc(var(--card-height) / 150);
}

/* -bottom icons- */
.betaCard_bottom-icons-container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--card-height) / 2.55);
  height: calc(var(--card-height) / 18);
  display: flex;
}

.betaCard_icon-group {
  flex: 1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;

  /* add relative for stats-rectangles */
  position: relative;
}
.betaCard_icon-group img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.betaCard_origin-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_origin.png);
}
.betaCard_starship-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_starship.png);
}
.betaCard_equipmentSet-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_equipmentSet.png);
}
.betaCard_officer-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_officer.png);
}
.betaCard_crew-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_crew.png);
}
.betaCard_passenger-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_passenger.png);
}
.betaCard_cargo-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_cargo.png);
}
.betaCard_equipment-icon {
  background-image: url(https://exode.io/resources/betaCard_img/bottom_bar_single_icons/card_part_bottomIconSingle_inactive_part_equipment.png);
}

.betaCard_bottom-icons-container img {
  width: 100%;
}

/* stats rectangles */
.betaCard_stats-rectangles-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 88%;
  width: calc(3 * (var(--stat-rectangle-size) + var(--betaCard_stats-rectangles-container-gap)));
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap-reverse;
  gap: var(--betaCard_stats-rectangles-container-gap);
}
.betaCard_stats-rectangles-container.centered {
  justify-content: center;
}

.betaCard_stats-rectangles {
  box-sizing: border-box;
  width: var(--stat-rectangle-size);
  height: var(--stat-rectangle-size);
  background-color: transparent;
  border: calc(var(--card-height) / 465) solid var(--orange-stats-rect-fill-color);
}
.betaCard_stats-rectangles.filled {
  border: none;
  background-color: var(--yellow-stats-rect-fill-color);
}
.betaCard_stats-rectangles.upgraded {
  border: none;
  background-color: var(--orange-stats-rect-fill-color);
}

/* -exp & levels containers- */

/* -experience- */
.betaCard_experience-container {
  position: absolute;
  right: calc(var(--card-height) / 30);
  bottom: 3.6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--card-height) / 5);
}
.betaCard_experience-text {
  text-transform: uppercase;
  color: var(--faction-color);
  font-size: calc(var(--card-height) / 55);
}

.betaCard_progress-container {
  width: 75%;
  background-color: transparent;
  border: calc(var(--card-height) / 465) solid var(--faction-color);
  height: calc(var(--card-height) / 200);
}
.betaCard_progress-bar {
  width: 20%;
  height: 100%;
  background-color: var(--faction-color);
  text-align: center;
}

/* -levels- */
.betaCard_levels-container {
  position: absolute;
  right: calc(var(--card-height) / 30);
  bottom: 1%;
  display: flex;
  justify-content: flex-start;
  gap: calc(var(--card-height) / 120);
  align-items: center;
  width: calc(var(--card-height) / 5);
}
.betaCard_levels-text {
  text-transform: uppercase;
  color: var(--faction-color);
  font-size: calc(var(--card-height) / 55);
}
.betaCard_levels-array-container {
  display: flex;
  justify-content: flex-start;
  gap: calc(var(--card-height) / 280);
  align-items: center;
  color: var(--faction-color);
  font-size: calc(var(--card-height) / 55);
}
.betaCard_level-rectangle {
  box-sizing: border-box;
  width: calc(var(--stat-rectangle-size) * 1.11);
  height: calc(var(--stat-rectangle-size) * 1.11);
  background-color: transparent;
  border-width: calc(var(--stat-rectangle-size) / 100);
  border-style: solid;
  border-color: var(--faction-color);
  opacity: 0.89;
}
.betaCard_level-rectangle.filled {
  background-color: var(--faction-color);
}
.betaCard_level-bracket {
  margin: 0 calc(var(--card-height) / 150);
}

/* -elite card-  */

/* .betaCard_beta-card-title-container .betaCard_elite-text */
.betaCard_betaCard_elite-text {
  position: absolute;
  right: 0;
  bottom: 125%;
  text-transform: uppercase;
  font-size: calc(var(--card-height) / 40); /* 1.5vh */
  color: var(--elite-color);
}
/* .betaCard_beta-card-title .betaCard_elite-star */
.betaCard_elite-star {
  background-image: url(https://exode.io/resources/betaCard_img/card_part_floating_elite_star.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: var(--betaCard_elite-star-size);
  width: var(--betaCard_elite-star-size);
}

/* right icons container */
.betaCard_right-icons-container {
  position: absolute;
  top: calc(var(--card-height) / 123);
  right: 0;
  height: calc(var(--card-height) / 1.55);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.betaCard_right-icon {
  width: calc(var(--box-size) * 1.25);
  height: calc(var(--box-size) * 1.25);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* top icons */
.betaCard_top-right-icons-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* slots for tst purpose */
.slot-1 {
  background-image: url(https://exode.io/resources/betaCard_img/cardIcons/skill_manualDexterity.png);
}
.slot-2 {
  background-image: url(https://exode.io/resources/betaCard_img/cardIcons/skill_toughness.png);
}

/* middle icons */
.betaCard_middle-right-icons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* bottom icons */
.betaCard_bottom-right-icons-container {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
}

/* -extra faction icons- */
.betaCard_extra-faction-icons-container {
  position: absolute;
  bottom: 15%;
  left: 14.5%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  column-gap: calc(var(--box-size) / 6);
}
.betaCard_extra-faction-icon {
  width: calc(var(--box-size) / 2.3);
  height: calc(var(--box-size) / 2.3);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.betaCard_extra-faction-icon-html {
  background-image: url(https://exode.io/resources/betaCard_img/factionIcons/faction_versatile_64.png);
}

/* card inspector overlay */
.betaCard_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none;
}
.betaCard_zoomed {
  position: absolute;
  z-index: 1000;
  transform: translate(-50%, -50%) scale(2);
  transition: transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out;
}
.betaCard_clone {
  position: absolute;
  z-index: 1000;
  transition: transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out;
}

/* hover effect and tooltips for clone TODO: only zoom icon and not tooltip */
.betaCard_inspector-hover-effect {
  /* transform: scale(1.4); */
  /* z-index: 1; */
}
/* add to classes that need to be hovered over a transition property */
.betaCard_beta-card-score,
.betaCard_beta-card-faction-logo,
.betaCard_extra-faction-icon,
.betaCard_right-icon,
.betaCard_progress-container,
.betaCard_icon-group {
  transition: transform 0.3s;
}

/* information chips overlay */
.betaCard_information-chip-container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
  position: absolute;
}

.betaCard_information-chip-container.left .betaCard_information-chip-image {
  transform: rotate(180deg);
}

.betaCard_information-chip-container.left .betaCard_information-chip-text {
  justify-content: right;
  grid-row: 1;
}

.betaCard_information-chip-container.left .betaCard_tooltip-text {
  left: 15%;
}

.betaCard_information-chip-image {
  width: 96px;
  height: 54px;
  background:rgba(148, 148, 148, 200);
  -webkit-mask:url("../ui_img/information_chip_ui.png") center/contain;
          mask:url("../ui_img/information_chip_ui.png") center/contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.betaCard_information-chip-image-skill {
  width: 96px;
  height: 54px;
  /*background:#9b49cd;*/
  background:rgba(155, 73, 205, 150);
  -webkit-mask:url("../ui_img/information_chip_ui.png") center/contain;
          mask:url("../ui_img/information_chip_ui.png") center/contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.betaCard_information-chip-text {
  color: white;
  font-size: 8px;
  font-family: "cascadia";
  font-weight: normal;
  text-shadow: none;
  min-width: 96px;
}

.betaCard_tooltip {
  display: flex;
}

.betaCard_tooltip .betaCard_tooltip-text {
  visibility: hidden;
  width: 150px;
  height: auto;
  background-color: rgb(31, 30, 56);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 9999;
  bottom: 80%;
  margin-left: -60px;
  font-size: 0.9vh;
  font-style:italic;
  padding:6px;
  font-family: "Electrolize";
  border:1px solid white;
}

.betaCard_tooltip .betaCard_tooltip-text.bottom {
  bottom: -60%;
}

.betaCard_tooltip .betaCard_tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(31, 30, 56) transparent transparent transparent;
}

.betaCard_tooltip .betaCard_tooltip-text.bottom::after {
  top: -28%;
  border-color: transparent transparent rgb(31, 30, 56) transparent;
}

.betaCard_tooltip:hover .betaCard_tooltip-text {
  visibility: visible;
}

/* lore description container */
.betaCard_lore-container {
  position:absolute;
  z-index:2000;
  margin:20px;
  width:30%;
  top: 0;
  /* height:30%; */
  background: linear-gradient(0.4turn, rgb(32, 79, 101), rgb(5, 37, 51));
  border: 2px solid rgb(127, 224, 253);
  box-shadow:0 0 14px #9ecaed;
  color:white;
}

.betaCard_lore-title {
  margin: 20px;
  font-weight: bold;
  font-size: 21px;
}

.betaCard_lore-description {
  margin: 30px;
  font-style: italic;
  font-size: 1.4vh;
  font-family:"Electrolize";
}