{"version":3,"file":"public/css/game.css","mappings":"AAAA;;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ACCF;ADCE;;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ACEJ;ADCE;;EACE;ACEJ;ADCE;;EACE;ACEJ;ADCE;;EACE;EACA;ACEJ;ADAI;;EACE;EACA;EACA;EACA;EACA;ACGN;;AC3CA;EACE;EACA;EACA;EACA;EACA;AD8CF;AC5CE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AD8CJ;AC5CI;EACE;EACA;EACA;KAAA;EACA;EACA;AD8CN;AC5CM;EACE;AD8CR;ACxCI;EACE;AD0CN;ACtCE;EACE;ADwCJ;;ACpCA;EACE;ADuCF;;AEhFA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFmFF;AEjFE;EACE;EACA;EACA;EACA;AFmFJ;AEhFE;;;EAGE;AFkFJ;AE/EE;EACE;EACA;EACA;AFiFJ;AE/EI;EACE;EACA;EACA;AFiFN;AE9EI;EACE;EACA;EACA;AFgFN;AE3EI;EACE;EACA;EACA;AF6EN;AEzEE;EACE;AF2EJ;AEzEI;EACE;EACA;EACA;EACA;AF2EN;AEzEM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;EACA;EACA;AF2ER;AEzEQ;EACE;AF2EV;AExEQ;EACE;AF0EV;AEtEM;EACE;EACA;EACA;EACA;EACA;EACA;AFwER;AEtEQ;EACE;AFwEV;AErEQ;EACE;AFuEV;AEnEM;EACE;EACA;EACA;EACA;EACA;AFqER;AEhEE;;;EAGE;EACA;AFkEJ;AEhEI;;;EACE;EACA;EACA;EACA;AFoEN;AElEM;;;EACE;EACA;EACA;EACA;AFsER;AEhEI;EACE;AFkEN;AEhEM;EACE;EACA;AFkER;AE9DI;;EAEE;AFgEN;AE3DI;;EAEE;AF6DN;AExDI;;EAEE;AF0DN;;AGzNA;EACE;EACA;EACA;AH4NF;AGzNI;EACE;AH2NN;AGxNI;;EAGE;EACA;EACA;AHyNN;AGtNI;EACE;AHwNN;AGrNI;EACE;AHuNN;AGpNI;EACE;EACA;EACA;AHsNN;AGnNI;EACE;AHqNN;AGnNM;EACE;AHqNR;AGlNM;;EAGE;AHmNR;;AI7PA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AJgQF;AI9PE;EACE;AJgQJ;AI9PI;EACE;EACA;AJgQN;;AK9QA;EACE;EACA;ALiRF;AK/QE;EACE;EACA;ALiRJ;;AA/QA;EACE;EACA;AAkRF;AA/QA;EACE;EACA;AAiRF;AA9QA;EACE;EACA;AAgRF;AA7QA;EACE;EACA;AA+QF;AA5QA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA2QF;;AAxQA;EACE;EACA;EACA;AA2QF;;AAxQA;EACE;AA2QF,C","sources":["webpack://heromorph2d/./scss/game/buttons.scss","webpack://heromorph2d/./scss/game.scss","webpack://heromorph2d/./scss/game/character.scss","webpack://heromorph2d/./scss/game/character_popup.scss","webpack://heromorph2d/./scss/game/game_board.scss","webpack://heromorph2d/./scss/game/health_bar.scss","webpack://heromorph2d/./scss/game/types_bar.scss"],"sourcesContent":["button.item-button,\nbutton.ability-button {\n  position: relative;\n  width: 75px;\n  height: 75px;\n  padding: 0;\n  background-color: #fffa;\n  border: 1px solid #aaa;\n  border-radius: 10px;\n  cursor: pointer;\n\n  &:after {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 80%;\n    height: 80%;\n    padding: 10%;\n  }\n\n  &:hover:not([disabled]) {\n    opacity: .9;\n  }\n\n  &:active:not([disabled]) {\n    border-color: #0f0;\n  }\n\n  &[disabled] {\n    background-color: #ccca;\n    color: #222;\n\n    &:after {\n      content: '\\f05e';\n      font-family: 'Font Awesome 6 Free';\n      font-weight: bold;\n      font-size: 45px;\n      color: #b7000099;\n    }\n  }\n}","@import 'game/buttons.scss';\n@import 'game/character.scss';\n@import 'game/character_popup.scss';\n@import 'game/game_board.scss';\n@import 'game/ui.scss';\n@import 'game/health_bar.scss';\n@import 'game/types_bar.scss';\n\n@font-face {\n  font-family: NetflixSans;\n  src: url('/public/font/Netflix Sans Medium.otf') format('opentype');\n}\n\n@font-face {\n  font-family: NetflixSansLight;\n  src: url('/public/font/Netflix Sans Light.otf') format('opentype');\n}\n\n@font-face {\n  font-family: NetflixSansBold;\n  src: url('/public/font/Netflix Sans Bold.otf') format('opentype');\n}\n\n@font-face {\n  font-family: font-awesome;\n  src: url('/public/font/Netflix Sans Bold.otf') format('opentype');\n}\n\n#game {\n  --character-size-multiplier: 1;\n  --health-bar-height: 20px;\n  --health-color: #b70000;\n  --character-popup-width: 250px;\n\n  /* Classes/Powers/Origins colors */\n  --color-class-assaissin: #aaa;\n  --color-class-hero: #aaa;\n  --color-class-soldier: #006209;\n  --color-class-sorcerer: #aaa;\n  --color-class-vigilate: #aaa;\n  --color-class-villain: #aaa;\n\n  --color-origin-animal: #411313;\n  --color-origin-cyborg: #6e5f5f;\n  --color-origin-demon: #c42314;\n  --color-origin-eternal: #aaa;\n  --color-origin-god: #ffe77f;\n  --color-origin-human: #e58989;\n  --color-origin-kryptonian: #22b210;\n  --color-origin-mechanical: #7c7c7c;\n\n  --color-power-dimensional-travel: #aaa;\n  --color-power-empathy: #aaa;\n  --color-power-healing: #d200a4;\n  --color-power-illusion-conjuring: #aaa;\n  --color-power-levitation: #005bff;\n  --color-power-magic: #aaa;\n  --color-power-psychokinesis: #5c07ec;\n  --color-power-shapeshift: #aaa;\n  --color-power-superspeed: #aaa;\n  --color-power-telekinetic: #5d09de;\n  --color-power-teleportation: #aaa;\n  --color-power-time-travel: #aaa;\n}\n\nbody {\n  background: #eee;\n  font-family: NetflixSansLight, sans-serif;\n  font-size: 14px;\n}\n\np {\n  margin: 0 0 5px 0;\n}",".character-container {\n  width: calc(120px * var(--character-size-multiplier));\n  min-width: calc(120px * var(--character-size-multiplier));\n  height: calc(170px * var(--character-size-multiplier));\n  margin: 0 10px;\n  position: relative;\n\n  .portrait {\n    border: 3px solid #666;\n    border-radius: 20px 20px 2px 2px;\n    box-sizing: border-box;\n    height: calc(100% - var(--health-bar-height));\n    width: 100%;\n    overflow: hidden;\n    transition: border .1s;\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transform: scale(1.05);\n      transition: transform .5s;\n\n      &:hover {\n        transition: unset;\n      }\n    }\n  }\n\n  &:hover {\n    .portrait {\n      border-color: #333;\n    }\n  }\n\n  &.leader {\n    --character-size-multiplier: 1.3;\n  }\n}\n\n.character-container-separator {\n  width: calc(120px * var(--character-size-multiplier) * 1.3);\n}",".character-popup {\n  height: 0;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 200ms, top 200ms;\n  position: absolute;\n  top: 0;\n  right: 100%;\n  width: var(--character-popup-width);\n  background-color: #eee;\n  border-radius: 20px;\n  padding: 0;\n  z-index: 100;\n  box-shadow: 4px 6px 5px #0009;\n  border: none;\n\n  &.show {\n    height: auto;\n    opacity: 1;\n    top: -20px;\n    border: 3px solid #666;\n  }\n\n  .character-popup-title,\n  .character-popup-body,\n  .character-popup-footer {\n    padding: 5px 10px;\n  }\n\n  .character-popup-title {\n    background-color: #666;\n    color: #fff;\n    text-shadow: 1px 1px 1px black;\n\n    > p:nth-of-type(1) {\n      font-family: NetflixSans;\n      font-size: 20px;\n      font-weight: bold;\n    }\n\n    > p:nth-of-type(2) {\n      font-family: NetflixSansLight;\n      font-size: 10px;\n      font-weight: bold;\n    }\n  }\n\n  .character-popup-body {\n    > p {\n      font-size: 14px;\n      font-weight: bold;\n      margin: 10px 0 0 0;\n    }\n  }\n\n  .character-stats {\n    height: 65px;\n\n    .stat-wrapper {\n      position: relative;\n      display: inline-block;\n      height: 50px;\n      width: 43px;\n\n      progress {\n        position: absolute;\n        top: 50px;\n        left: 0;\n        transform: rotateZ(-90deg);\n        transform-origin: 0 0;\n        width: 50px;\n        height: 43px;\n        appearance: unset;\n        border-radius: 8px;\n        overflow: hidden;\n\n        &::-webkit-progress-bar {\n          background-color: #c7c7c7;\n        }\n\n        &::-webkit-progress-value {\n          background-color: #1f60ff;\n        }\n      }\n\n      .stat-value {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 10px;\n        color: #fff;\n        text-shadow: 1px 1px 1px #000;\n\n        &.stat-value-base {\n          bottom: 0;\n        }\n\n        &.stat-value-max {\n          top: 0;\n        }\n      }\n\n      p {\n        position: absolute;\n        bottom: -20px;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 12px;\n      }\n    }\n  }\n\n  .powers-bar,\n  .origins-bar,\n  .classes-bar, {\n    display: inline-table;\n    --decoration-width: 8px;\n\n    .outer-label {\n      display: inline-block;\n      margin: 0 2px 2px 0;\n      background-color: #000;\n      padding: 1px;\n\n      .inner-label {\n        display: block;\n        padding: 0 var(--decoration-width);\n        font-size: 12px;\n        color: #fff;\n      }\n    }\n  }\n\n  .powers-bar {\n    .outer-label {\n      margin-right: -5px;\n\n      .inner-label {\n        padding-right: calc(var(--decoration-width) + 1px);\n        padding-left: calc(var(--decoration-width) + 1px);\n      }\n    }\n\n    .outer-label,\n    .inner-label {\n      clip-path: polygon(var(--decoration-width) 0%, 100% 0, calc(100% - var(--decoration-width)) 100%, 0% 100%);\n    }\n  }\n\n  .origins-bar {\n    .outer-label,\n    .inner-label {\n      border-radius: var(--decoration-width);\n    }\n  }\n\n  .classes-bar {\n    .outer-label,\n    .inner-label {\n      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);\n    }\n  }\n}","#game-board {\n  background-image: url(https://static.vecteezy.com/system/resources/previews/008/255/706/non_2x/wooden-texture-floor-seamless-background-vector.jpg);\n  background-size: 100vw;\n  background-repeat: repeat-y;\n\n  .player-board {\n    .characters-container:not(.characters-container-leader) {\n      margin: 0 0 -100px 0;\n    }\n\n    .items-container,\n    .abilities-container\n    {\n      display: inline-flex;\n      align-items: flex-end;\n      width: 100%;\n    }\n\n    .items-container {\n      justify-content: flex-end;\n    }\n\n    .abilities-container {\n      justify-content: flex-start;\n    }\n\n    .characters-container {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n    }\n\n    &.player-board-opponent {\n      margin-bottom: 20px;\n\n      .characters-container:not(.characters-container-leader) {\n        margin: -100px 0 0 0;\n      }\n\n      .items-container,\n      .abilities-container\n      {\n        align-items: flex-start;\n      }\n    }\n  }\n}",".health-bar {\n  height: var(--health-bar-height);\n  border: 1px solid #333;\n  border-radius: 2px;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-align: center;\n  color: #fff;\n\n  .health-type {\n    background: linear-gradient(90deg, var(--health-color) 100%, #0006 100%); // Should only be a fallback\n\n    &:after {\n      content: attr(current-health) ' / ' attr(max-health);\n      display: block;\n    }\n  }\n}",".types-bar {\n  height: 20px;\n  max-height: 20px;\n\n  img {\n    height: 20px;\n    width: 20px;\n  }\n}"],"names":[],"sourceRoot":""}