.unit {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  height: calc(100vh - 120px);
  width: calc(100vw - 60px);
  border-radius: 30px 30px 0 0;
  z-index: 1;
}

.skillPanel {
  display: grid;
  grid-template-rows: [header] 150px [skills] 125px [attributes] repeat(8, 35px) [footer] calc(100vh - 565px);
  position: absolute;
  top: 0;
  right: 0;
  width: 30vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0 30px 0 0;
  z-index: 3;
}

.faction {
  z-index: 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0;
  width: calc(1042px * 0.46);
  height: calc(349px * 0.46);
  position: absolute;
  left: 200px;
  bottom: 150px;
}

.shipType {
  z-index: 3;
  position: absolute;
  left: 175px;
  bottom: 100px;
  max-width: 235px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  font-weight: bold;
  color: white;
  padding-left: 45px;
}

.affinity {
  z-index: 3;
  position: absolute;
  left: 215px;
  bottom: 50px;
  width: auto;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
  font-weight: bold;
  color: white;
  padding: 0 10px;
}

.combatPoints {
  z-index: 3;
  position: absolute;
  bottom: 100px;
  left: 400px;
  width: 400px;
  height: 50px;
  line-height: 50px;
  font-size: 50px;
  font-weight: bold;
  color: white;
  padding-left: 45px;
}

.combatPoints::after {
  display: block;
  content: 'Combat Power';
  font-size: 20px;
  line-height: 40px;
}

.unit-equipment {
  z-index: 10;
  position: absolute;
  top: 225px;
  left: 100px;
  width: calc(70vw - 150px);
  display: flex;
  flex-wrap: no-wrap;
  gap: 25px;
}

.unit-implants {
  z-index: 10;
  position: absolute;
  top: 350px;
  left: 100px;
  display: flex;
  flex-wrap: no-wrap;
  gap: 25px;
}

.level {
  position: absolute;
  z-index: 4;
  right: 25px;
  top: 20px;
  font-size: 60px;
  font-weight: bold;
  line-height: 73px;
  color: white;
  text-align: left;
  min-width: 70px;
}

.level::before {
  content: 'Level';
  font-size: 35px;
  color: #ee701c;
  line-height: 40px;
}

.rarity {
  position: relative;
  left: 0;
  top: 50px;
  font-size: 30px;
  z-index: 3;

  width: 300px;
  height: 60px;
  line-height: 80px;
  padding-left: 40px;
}

.rank {
  z-index: 4;
  position: relative;
  left: 200px;
  top: 0;
  width: 300px;
  z-index: 99;
}

.rank>.star {
  font-size: 50px;
  letter-spacing: -6px;
  height: 50px;
  display: inline-block;
  text-align: left;
  line-height: 50px;
  color: rgba(200, 200, 200, 1);
  padding: 0;
  margin: 0;
}

.rank>.star.active {
  color: #ffd53d;
}

.rank>.star.inactive {
  color: grey;
}

.portrait {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
}

.skill-bar {
  position: relative;
  left: 0;
  top: 110px;
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: space-between;
  text-align: center;
  line-height: 30px;
  font-size: 25px;
  gap: 0;
  margin: 0;
}

.skill-bar > div {
  flex: 1;
  padding: 0 40px 0 0;
  text-align: right;
}

.unit[data-affinity="Green"] .skill-bar {
  background-color: #45680d;
}

.unit[data-affinity="Blue"] .skill-bar {
  background-color: #2a49cc;
}

.unit[data-affinity="Red"] .skill-bar {
  background-color: #ca5526;
}

.unit[data-affinity="None"] .skill-bar {
  background-color: #5c279b;
}

.skill-bar .split {
  content: '';
  flex-grow: 1;
  background-color: black;
  clip-path: polygon(0 0, 45px 100%, 100% 100%, 100% 0);
  max-width: 33%;
}

.total-upgrade-cost {
  z-index: 4;
  position: relative;
  transform: translateX(-75px) translateY(-30px);
  display: block;
  font-weight: normal;
  font-size: 0.8em;
  padding-left: 20px;
  background-image: url('/assets/Icons/Currency=Credits, Rarity=Default, Unit Type=Default, Tier=Default, State=Default, Implant Type=None.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.neurons {
  position: relative;
  left: 0;
  top: 15px;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.neruon-header {
  width: 100%;
  text-align: center;
  margin: 15px 0 0 0;
}
.neurons .neuronR1, .neurons .neuronR2, .neurons .neuronR3
, .neuron-upgrade .neuronR1, .neuron-upgrade .neuronR2, .neuron-upgrade .neuronR3, .neuron-upgrade .upgrade {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  font-weight: bold;
  text-shadow: 2px 2px black;
}
.neurons .neuronR1, .neurons .neuronR2, .neurons .neuronR3 {
  width: 100px;
  height: 100px;
}
.neuron-upgrade .neuronR1, .neuron-upgrade .neuronR2, .neuron-upgrade .neuronR3, .neuron-upgrade .upgrade {
  width: 75px;
  height: 75px;
}
.neuron-upgrade > div {
  margin-left: 20px;
}

.None .neuronR1 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Antimatter, Variant=Print.png'); }
.None .neuronR2 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Antimatter, Variant=Link.png'); }
.None .neuronR3 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Antimatter, Variant=Net.png'); }
.Red .neuronR1 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Thermal, Variant=Print.png'); }
.Red .neuronR2 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Thermal, Variant=Link.png'); }
.Red .neuronR3 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Thermal, Variant=Net.png'); }
.Blue .neuronR1 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Electric, Variant=Print.png'); }
.Blue .neuronR2 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Electric, Variant=Link.png'); }
.Blue .neuronR3 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Electric, Variant=Net.png'); }
.Green .neuronR1 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Chemical, Variant=Print.png'); }
.Green .neuronR2 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Chemical, Variant=Link.png'); }
.Green .neuronR3 { background-image: url('/assets/exported/Currency=Skill Neurons, Tier=Default, State=Default, Implant Type=None, Tactic=Chemical, Variant=Net.png'); }

.neuron-upgrade .upgrade {
  display: flex;
  width: 50px;
  height: 50px;
  background-size: 20px 20px;
  backgrouns-position: top right;
  background-image: url('/assets/cubedweb/upgrade.png');
}

.skill-icons {
  position: relative;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  border-bottom: 1px dotted grey;
}

/* Base styles for the skill shape container */
.skill-circle,
.skill-hexagon {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 5px; /* Padding for the border */
  margin: 0 20px;
}

/* CIRCLE SHAPE */
.skill-circle {
  border-radius: 50%;
}

/* HEXAGON SHAPE */
.skill-hexagon {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* --- GRADIENT BORDER STYLES --- */
.skill-circle::before,
.skill-hexagon::before {
  z-index: 2;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Default gradient for the border */
  background: conic-gradient(
      #1e1e1e 0%,
      #1e1e1e 40%,
      #f0f0f0 60%,
      #f0f0f0 100%
  );
}

.skill-circle::before {
  border-radius: 50%;
}

.skill-hexagon::before {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  mask: polygon(
      50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
  );
  mask-composite: exclude;
  padding: 5px;
}

/* --- INNER SHAPE CONTENT --- */
.skill-content-circle,
.skill-content-hexagon {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  background-size: contain;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.skill-content-circle {
  border-radius: 50%;
}

.skill-content-hexagon {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.charge-overlay {
  z-index: 1;
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  text-align: left;
  justify-content: left;
  align-items: left;
  display: flex;
  border: 60px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translateX(-16px) translateY(-26px);
  box-sizing: border-box;
  clip-path: polygon(50% 60%, 100% 100%, 0 100%);
}

.charge-time {
  z-index: 3;
  position: absolute;
  width: 90px;
  height: 90px;
  left: 40px;
  top: 40px;
  text-align: left;
  justify-content: left;
  align-items: left;
  display: flex;
  transform: translateX(-15px) translateY(25px);
  box-sizing: border-box;

  background-size: 20px 20px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url('/assets/cubedweb/time.png');
  padding: 0 0 0 25px;
  line-height: 20px;
  color: black;
  font-weight: normal;
}

.skill-type {
  font-size: 0.8rem;
  color: #aaaaaa;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* --- LEVEL DISPLAY STYLES --- */
.skill-level-container {
  position: absolute;
  top: 1rem;
  width: 80%;
  height: 25%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

.skill-level-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.attributes {
  position: relative;
  top: 80px;
}

.attribute .value a {
    text-decoration: none;
    font-weight: normal;
}

.cite {
  height: 30px;
  width: 80%;
  line-height: 30px;
  font-size: 16px;
  font-weight: bold;
  margin: 4px 10%;
}

.attribute {
  background: linear-gradient(to right, rgba(128, 128, 128, 0.5), transparent);
  height: 30px;
  width: 80%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20%;
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 4px 10%;
}

.attribute .name {
  flex: 1 1 40%;
  text-align: left;
  padding: 0 0 0 10px;
}

.attribute .value, .cite .value {
  flex: 1 1 40%;
  right: 0;
  text-align: right;
  padding: 0 10px 0 0;
}

.unit[data-ship-type="Defender"] .shipType { background-size: 35px 45px; background-position: left; background-repeat: no-repeat; background-image: url('/assets/Assorted/Icon=Defender.png'); }
.unit[data-ship-type="Attacker"] .shipType { background-size: 35px 45px; background-position: left; background-repeat: no-repeat; background-image: url('/assets/Assorted/Icon=Attacker.png'); }
.unit[data-ship-type="Debuffer"] .shipType { background-size: 35px 45px; background-position: left; background-repeat: no-repeat; background-image: url('/assets/Assorted/Icon=Hacker.png'); }
.unit[data-ship-type="Supporter"] .shipType { background-size: 40px 40px; background-position: left; background-repeat: no-repeat; background-image: url('/assets/Assorted/Icon=Supporter.png'); }

.unit[data-affinity="Red"] .affinity { background-color: #ca5526; }
.unit[data-affinity="Green"] .affinity { background-color: #45680d; }
.unit[data-affinity="Blue"] .affinity { background-color: #2a49cc; }
.unit[data-affinity="None"] .affinity { background-color: #5c279b; }

.unit[data-rarity="Common"]>.rarity { background: linear-gradient(to right, #6c6c6c, transparent); }
.unit[data-rarity="Uncommon"]>.rarity { background: linear-gradient(to right, #38874f, transparent); }
.unit[data-rarity="Rare"]>.rarity { background: linear-gradient(to right, #4369a3, transparent); }
.unit[data-rarity="Epic"]>.rarity { background: linear-gradient(to right, #723681, transparent); }
.unit[data-rarity="Legendary"]>.rarity { background: linear-gradient(to right, #bf7432, transparent); }

/* Border style for a maxed-out skill */
.unit[data-rarity="Common"] .skill-circle.max-level::before { background: conic-gradient(#6c6c6c 0%, #6c6c6c 100%); }
.unit[data-rarity="Uncommon"] .skill-circle.max-level::before { background: conic-gradient(#38874f 0%, #38874f 100%); }
.unit[data-rarity="Rare"] .skill-circle.max-level::before { background: conic-gradient(#4369a3 0%, #4369a3 100%); }
.unit[data-rarity="Epic"] .skill-circle.max-level::before { background: conic-gradient(#723681 0%, #723681 100%); }
.unit[data-rarity="Legendary"] .skill-circle.max-level::before { background: conic-gradient(#bf7432 0%, #bf7432 100%); }

.unit[data-faction="Marauders"] { background-image: url('/assets/Faction\ Backgrounds/Marauders.png'); }
.unit[data-faction="Terran Combine"] { background-image: url('/assets/Faction\ Backgrounds/Terran Combine.png'); }
.unit[data-faction="Atlas Syndicate"] { background-image: url('/assets/Faction\ Backgrounds/Atlas Syndicate.png'); }
.unit[data-faction="Binderburg"] { background-image: url('/assets/Faction\ Backgrounds/binderburg 1.png'); }
.unit[data-faction="Gelecek"] { background-image: url('/assets/Faction\ Backgrounds/Gelecek.png'); }
.unit[data-faction="MPL"] { background-image: url('/assets/Faction\ Backgrounds/MPL.png'); }
.unit[data-faction="Frontier Legion"] { background-image: url('/assets/Faction\ Backgrounds/Frontier Legion.png'); }
.unit[data-faction="XAOC"] { background-image: url('/assets/Faction\ Backgrounds/XAOC.png'); }
.unit[data-faction="Tianchao"] { background-image: url('/assets/Faction\ Backgrounds/Tianchao.png'); }
.unit[data-faction="Everliving"] { background-image: url('/assets/Faction\ Backgrounds/Everliving.png'); }
.unit[data-faction="Khajiit"] { background-image: url('/assets/Faction\ Backgrounds/Khajiit.png'); }

.unit[data-faction="Marauders"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/marauders_faction\ logo.png'); }
.unit[data-faction="Terran Combine"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/Terran_faction\ logo.png'); }
.unit[data-faction="Atlas Syndicate"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/Atlas_faction\ logo.png'); }
.unit[data-faction="Binderburg"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/binderburg_faction\ logo.png'); }
.unit[data-faction="Gelecek"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/Gelecek_faction\ logo.png'); }
.unit[data-faction="MPL"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/MPL_faction\ logo.png'); }
.unit[data-faction="Frontier Legion"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/frontierLegion_faction\ logo.png'); }
.unit[data-faction="XAOC"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/xaoc_faction\ logo.png'); }
.unit[data-faction="Tianchao"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/Tianchao_faction\ logo.png'); }
.unit[data-faction="Everliving"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/everliving_faction\ logo.png'); }
.unit[data-faction="Khajiit"] .faction { background-image: url('/assets/Logos/Faction_logos/Full\ Faction\ Logos/Khajiit_faction\ logo.png'); }