button.item-button,
button.ability-button {
  position: relative;
  width: 75px;
  height: 75px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6666666667);
  border: 1px solid #aaa;
  border-radius: 10px;
  cursor: pointer;
}
button.item-button:after,
button.ability-button:after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
  padding: 10%;
}
button.item-button:hover:not([disabled]),
button.ability-button:hover:not([disabled]) {
  opacity: 0.9;
}
button.item-button:active:not([disabled]),
button.ability-button:active:not([disabled]) {
  border-color: #0f0;
}
button.item-button[disabled],
button.ability-button[disabled] {
  background-color: rgba(204, 204, 204, 0.6666666667);
  color: #222;
}
button.item-button[disabled]:after,
button.ability-button[disabled]:after {
  content: "\f05e";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  font-size: 45px;
  color: rgba(183, 0, 0, 0.6);
}

.character-container {
  width: calc(120px * var(--character-size-multiplier));
  min-width: calc(120px * var(--character-size-multiplier));
  height: calc(170px * var(--character-size-multiplier));
  margin: 0 10px;
  position: relative;
}
.character-container .portrait {
  border: 3px solid #666;
  border-radius: 20px 20px 2px 2px;
  box-sizing: border-box;
  height: calc(100% - var(--health-bar-height));
  width: 100%;
  overflow: hidden;
  transition: border 0.1s;
}
.character-container .portrait img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s;
}
.character-container .portrait img:hover {
  transition: unset;
}
.character-container:hover .portrait {
  border-color: #333;
}
.character-container.leader {
  --character-size-multiplier: 1.3;
}

.character-container-separator {
  width: calc(120px * var(--character-size-multiplier) * 1.3);
}

.character-popup {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms, top 200ms;
  position: absolute;
  top: 0;
  right: 100%;
  width: var(--character-popup-width);
  background-color: #eee;
  border-radius: 20px;
  padding: 0;
  z-index: 100;
  box-shadow: 4px 6px 5px rgba(0, 0, 0, 0.6);
  border: none;
}
.character-popup.show {
  height: auto;
  opacity: 1;
  top: -20px;
  border: 3px solid #666;
}
.character-popup .character-popup-title,
.character-popup .character-popup-body,
.character-popup .character-popup-footer {
  padding: 5px 10px;
}
.character-popup .character-popup-title {
  background-color: #666;
  color: #fff;
  text-shadow: 1px 1px 1px black;
}
.character-popup .character-popup-title > p:nth-of-type(1) {
  font-family: NetflixSans;
  font-size: 20px;
  font-weight: bold;
}
.character-popup .character-popup-title > p:nth-of-type(2) {
  font-family: NetflixSansLight;
  font-size: 10px;
  font-weight: bold;
}
.character-popup .character-popup-body > p {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0 0 0;
}
.character-popup .character-stats {
  height: 65px;
}
.character-popup .character-stats .stat-wrapper {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 43px;
}
.character-popup .character-stats .stat-wrapper progress {
  position: absolute;
  top: 50px;
  left: 0;
  transform: rotateZ(-90deg);
  transform-origin: 0 0;
  width: 50px;
  height: 43px;
  -webkit-appearance: unset;
     -moz-appearance: unset;
          appearance: unset;
  border-radius: 8px;
  overflow: hidden;
}
.character-popup .character-stats .stat-wrapper progress::-webkit-progress-bar {
  background-color: #c7c7c7;
}
.character-popup .character-stats .stat-wrapper progress::-webkit-progress-value {
  background-color: #1f60ff;
}
.character-popup .character-stats .stat-wrapper .stat-value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}
.character-popup .character-stats .stat-wrapper .stat-value.stat-value-base {
  bottom: 0;
}
.character-popup .character-stats .stat-wrapper .stat-value.stat-value-max {
  top: 0;
}
.character-popup .character-stats .stat-wrapper p {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
}
.character-popup .powers-bar,
.character-popup .origins-bar,
.character-popup .classes-bar {
  display: inline-table;
  --decoration-width: 8px;
}
.character-popup .powers-bar .outer-label,
.character-popup .origins-bar .outer-label,
.character-popup .classes-bar .outer-label {
  display: inline-block;
  margin: 0 2px 2px 0;
  background-color: #000;
  padding: 1px;
}
.character-popup .powers-bar .outer-label .inner-label,
.character-popup .origins-bar .outer-label .inner-label,
.character-popup .classes-bar .outer-label .inner-label {
  display: block;
  padding: 0 var(--decoration-width);
  font-size: 12px;
  color: #fff;
}
.character-popup .powers-bar .outer-label {
  margin-right: -5px;
}
.character-popup .powers-bar .outer-label .inner-label {
  padding-right: calc(var(--decoration-width) + 1px);
  padding-left: calc(var(--decoration-width) + 1px);
}
.character-popup .powers-bar .outer-label,
.character-popup .powers-bar .inner-label {
  clip-path: polygon(var(--decoration-width) 0%, 100% 0, calc(100% - var(--decoration-width)) 100%, 0% 100%);
}
.character-popup .origins-bar .outer-label,
.character-popup .origins-bar .inner-label {
  border-radius: var(--decoration-width);
}
.character-popup .classes-bar .outer-label,
.character-popup .classes-bar .inner-label {
  clip-path: polygon(calc(100% - var(--decoration-width)) 0, 100% 50%, calc(100% - var(--decoration-width)) 100%, var(--decoration-width) 100%, 0 50%, var(--decoration-width) 0);
}

#game-board {
  background-image: url(https://static.vecteezy.com/system/resources/previews/008/255/706/non_2x/wooden-texture-floor-seamless-background-vector.jpg);
  background-size: 100vw;
  background-repeat: repeat-y;
}
#game-board .player-board .characters-container:not(.characters-container-leader) {
  margin: 0 0 -100px 0;
}
#game-board .player-board .items-container,
#game-board .player-board .abilities-container {
  display: inline-flex;
  align-items: flex-end;
  width: 100%;
}
#game-board .player-board .items-container {
  justify-content: flex-end;
}
#game-board .player-board .abilities-container {
  justify-content: flex-start;
}
#game-board .player-board .characters-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
#game-board .player-board.player-board-opponent {
  margin-bottom: 20px;
}
#game-board .player-board.player-board-opponent .characters-container:not(.characters-container-leader) {
  margin: -100px 0 0 0;
}
#game-board .player-board.player-board-opponent .items-container,
#game-board .player-board.player-board-opponent .abilities-container {
  align-items: flex-start;
}

.health-bar {
  height: var(--health-bar-height);
  border: 1px solid #333;
  border-radius: 2px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.health-bar .health-type {
  background: linear-gradient(90deg, var(--health-color) 100%, rgba(0, 0, 0, 0.4) 100%);
}
.health-bar .health-type:after {
  content: attr(current-health) " / " attr(max-health);
  display: block;
}

.types-bar {
  height: 20px;
  max-height: 20px;
}
.types-bar img {
  height: 20px;
  width: 20px;
}

@font-face {
  font-family: NetflixSans;
  src: url("/public/font/Netflix Sans Medium.otf") format("opentype");
}
@font-face {
  font-family: NetflixSansLight;
  src: url("/public/font/Netflix Sans Light.otf") format("opentype");
}
@font-face {
  font-family: NetflixSansBold;
  src: url("/public/font/Netflix Sans Bold.otf") format("opentype");
}
@font-face {
  font-family: font-awesome;
  src: url("/public/font/Netflix Sans Bold.otf") format("opentype");
}
#game {
  --character-size-multiplier: 1;
  --health-bar-height: 20px;
  --health-color: #b70000;
  --character-popup-width: 250px;
  /* Classes/Powers/Origins colors */
  --color-class-assaissin: #aaa;
  --color-class-hero: #aaa;
  --color-class-soldier: #006209;
  --color-class-sorcerer: #aaa;
  --color-class-vigilate: #aaa;
  --color-class-villain: #aaa;
  --color-origin-animal: #411313;
  --color-origin-cyborg: #6e5f5f;
  --color-origin-demon: #c42314;
  --color-origin-eternal: #aaa;
  --color-origin-god: #ffe77f;
  --color-origin-human: #e58989;
  --color-origin-kryptonian: #22b210;
  --color-origin-mechanical: #7c7c7c;
  --color-power-dimensional-travel: #aaa;
  --color-power-empathy: #aaa;
  --color-power-healing: #d200a4;
  --color-power-illusion-conjuring: #aaa;
  --color-power-levitation: #005bff;
  --color-power-magic: #aaa;
  --color-power-psychokinesis: #5c07ec;
  --color-power-shapeshift: #aaa;
  --color-power-superspeed: #aaa;
  --color-power-telekinetic: #5d09de;
  --color-power-teleportation: #aaa;
  --color-power-time-travel: #aaa;
}

body {
  background: #eee;
  font-family: NetflixSansLight, sans-serif;
  font-size: 14px;
}

p {
  margin: 0 0 5px 0;
}

/*# sourceMappingURL=game.css.map*/