<template>
  <dialog ref="modal" class="adventurer-details" v-if="adventurer">
    <button class="close" @click="$emit('closeButtonClicked')">✗</button>

    <div class="adventurer-portrait">
      <img :src="adventurer.portrait" alt="" draggable="false"/>
    </div>
    <span class="name">{{ adventurer.name }}</span>
    <div class="adventurer-data">
      <p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
      <p>Prestige level: {{ adventurer.prestige }}</p>

      <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
      <p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
    </div>
    <div
      v-if="showPrestigeButton"
      class="adventurer-upgrades"
    >
      <button
          class="button metal"
          :disabled="!adventurer.canPrestigeUp()"
          :title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
          @click="() => {
            if (adventurer === null) return;
            if (!adventurer.canPrestigeUp()) return;
            adventurer.prestigeUp();
          }"
      >
        Prestige up
      </button>
    </div>

  </dialog>
</template>

<script lang="ts">
import type {Adventurer} from "@/classes/Adventurer";
import {defineComponent, type PropType} from "vue";
import {formatDamage} from "@/classes/NumberMagic";

export default defineComponent({
  name: "AdventurerDetails",
  methods: {formatDamage},
  props: {
    adventurer: {
      type: Object as PropType<Adventurer | null>,
      required: true,
    },
    showPrestigeButton: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    const refs = this.$refs as any;
    refs.modal.showModal();
  },
});
</script>

<style lang="scss" scoped>
.adventurer-details {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 10rem;
  max-width: min(45rem, 100%);
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAIAAgADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAQACAwf/xAApEAADAAICAwEBAAMAAgIDAAAAAREhMQJBElFhcYEikaGx0eHxQmLB/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAECBP/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8A9KqpLDAKcroapJpJ5M3OR60BD0ZpAJdlgkwKvRQtsP6Aoe8GcoqBpMmZ+F0BJVDDNKgNZdGcsY0RUwFlaBdBmQjUwBiIharyXxARFCSrAUEFKbJgHwkiEASTY46JKdlAFKhkUsCt4AEpSyMTb0UyESWHgWSXofGooxjeglN+KQNAZSKZzsYU+EElSSrFIVh5KJLBTJrxumXj7AzCfHJqQm8AYSQNXBpKu2DEgMeOR8YMHEIM4WAhqew0AZWIKRmwbgK1MSBJ0VFcoVEwG0s2ICk0i7KsqBWkn7IsTAF4l4zRpQoEZiKVGkuwwFY8UtlIaqRTAGVgVsePEokwCZYpJ2ks0Y+wM49lPQ2CBiNssmqEbYBCaNQGqqBlJscrsbFAgBsp2aSS2WHogzBX0tMUUDWQ8e2MbABXGIlgU8lUnSAiYR01t0NYAzCWWagLcQURo0q0NUxseKwECSTFKD4lKoVAoNn0zyWQSYVtaYxzJmtLos+whn0JSS9ulcgMCGllBgKkkS4rZXEJXp0DahWuGevz2WSop9KdsvijDPZCKLopC/pVJQAn0oNSK3QVlulvCY9BJpgEjNLV7MpZNL0BdFH2KSXdCVZAV6RSd5KCll5CCUPFG1xUyw0wMyClTWAkAzZg15KGZ9FK9gOEmqGEhawUQGeKTo4TKK7BtBTUsljtAn2yquAjSaKJoKmtMvKVAGKKxksPDJwCcnSBMam4USQFVATy0OIwqbgE4Cy8DE6V6oFhYLCM2M1V+AZf4RpNN6Y3AVmTaDNNdDxXpaAxkTf+K2ZxQJRKmeTz0ateEgxABO4JYdNKJYLa0wjI2IcJYK3oA8p7ZLlGTrRJADbfUFfCTX8Q46AMroq0hvtFbpAFbGv0SaJgSc6C0c9jmhUnEXGpj/okq6ILlQTm2OYwS2EUd9FyqGNrLM8k6FSXphkVTSWMgYkeRsWCgqQDKrYyLRToZAMpMZXllAaAcLsbdmZiU0lEBJGumY/BSyA71Cw1tIPF+yimwhTSxS9gkvZZbAJB8cD4/Q8Ws0AuRSry6S410fGLsAiWVsJgYtVjIUZijWwSTZuVRAkkAwzIaU7ZSsATukUTNTihXLiltNr0BlJJdmXlG3yUMpp/ABQr6KwIlpkAnBTdwCeRqoVJO0cQqp0ioRJDHMAuXtmvL44AL8yNa6cKpXBWoDO9F4zZqxQKmFSMz9NJ9QpNgCNJqx0lrMKpiIJX2gWdnROrQfzBRm40hbxoqn/PZKsgkn2sFcYKpsb7QGbP0K9aRuJFAMJ1tLEFKZeDVSegtfwBWazNdwob6KgZm22Sb2jTcWVWZvSQBnRDXQWcBTaZS5M19NLb9gc40Nf8NYgVAFqJJrQyspOwMzNHbH+AnkCSb7CNmkwlcCJKDG04K4v2KT7YGFxaQ9apqKMp/wAAI2qZaZuxAlWBhcMjOkjbTRJPIGaMqCulvFhRJxvI2oIliikBJK0vHujHSlCBJfoeOfRpcVnOWXjkAS8n6SGZFcVouSbAxIthDouHGUPGPZFYizWSSV00bapmZi2BRB40XhbBT2FZa6JcVNmoiiAzBkTFIvHEAFgrk0kkgsAtPMLy9aLD7FpAZtZqwpS8QBfWVS+iolaZcsAVyuycXcBNDyVzQHi0l7LynwE1AleWEaRLkpAcmwSoUrlG2K5UOKTNKICb2HmOGg5cV0EgTT/DWJoylNj5AatejKeYSaTFQB/6F/g6WGEmLQQWfSTqyThJJBU3XsqlSbrLxUuQKjV/TJpSAWQsJsrOgDyY3EM/RoFx+hXcFn0U+hG078ZKu5M8bpGkqnAhSdyOU7glUgnk8lC8oykk6jUjBPL9ABT04OWWgMUkzPJvoldsitN1im0zO/RJZA0svLyaSxXgyVA1X7NLRztNJxbAU5WTbZmtqkmA5hlZco3DCPQGorky6myWS2wKYm2Zhoqk2FCVcbHwuaUXQxAHj9NJfwkyTzkIvFIy+JufwLkDPFJC9koTCiVvIwkhiQRhqMpxYy7KYYVmUWk1BSM9gKS7CIZNCgBJsfHOWUL2BLjB8YXGv0hv4EGtByWCuMBawJKPYxInoG2kFKjZXozW3nBSsDVzgr6RlYFNvQDtinPVDpkvYDCvRRJULU4EWBoJ7BOMB5IzcQ1ftM49BVRXJAViYFaVJEEPFR4NZMI1lduAKbpeWYGnhlldgNiYcbmsm8eySaWWUVlJUqwV7AzQpT2SyZVJvs0nEHYdgaT3WFfTJJ6QzICnggytj8AlyaBOsVhhI2Ua6C9FWWQJY7NJKOvIV+ySYA9wVxKQkvoEMSWWEIBgrj9MwlV2EaYYjDeKUAuimSWC7dYU5XYxQylXRSCL2wHx9OF4gZSGCuIxWIDPjR8RXGs0uPrCAx4tBGstm8BAM56FLGWPjfhJK4AzCSjNToHxU2AdylPpJRlJ2BJJvGifHApCltgZ8YshBn0koAJRji/BXFt9lK4FXRmJI2l8M8lWBdGU09mpFCXGJgZscKwfHsoBllcC+JmTQFYyVprxTySQFYy8npksB2EVrwxVJY0S3gKU4VuQr/S/gRNwVnJmGgrP0FaaFJQgPoNNmpAtbRQLA6eTSfFlV32QFqLoUsj9KMsKdImqZfEDNrL/AIaSBIAWtmk+tAlLEUr0AsuKeySNKJAZ29lWkXbaLLQBaKrQLeRWXUAZFNvFCOuskqvQF/WPivbJKbNUDOlEXlBW2DA1xbbciGNUwn6NNtKQIs2ElndBPkmKbQDlMs+3C8ukXk3gIZVgkoSZN34ANfSSdFYrKN+kAeP6i8bijUlsrUAeOOjPjUzUpZSYVlJ/hpLBJ8uwfkwBccBK/RpqKZQpRXbAOPHdbNeKeaw8mvQRvsI1PoeLbFVPBZAzyVplcWlk3M5VCXIEkkjMRrqGZFthVFAWtFt7FcfeQJNBhsYX2AZS3UILLyMoBSTrNeONkkBnbyVyahJIKFkUVSUJMIm1YSa+QxfZVEGm8/CSVpm/wk6UbTSeckmmzNVNJrLAakxxtMF4lbgBbRJ2jgpFr/5CCldlEiitCjpin9KZfbJOewFtXJnH4OGyT4+wBwO/hOFgC02MaJcrkW/uQCeweNFW8UpM0CXJ2DyeMVglnI34BcXPpcuXwVLWxwwM8XnCY8oSSTBxsB8kv4Fb1/ok0n7+sfKegKsk8VZBvbJOqYYEn7NKJGG0mVXQG/KaFfDFqNZSAG3nozW0atMrGgNJvo1WkZ8kltv4PliASThnWjSfQeQC259MJvSNeSa0ZsYDn4KeKYr1oLjcQHTyyWf4YRpNhCsqlYwb9AuTYG9K0zl0E1NinhwASa2Lyi2sA00pQrS44rLkqsErIiuAMpQ1FDOWyeM2gamIzKmSTZJV0CmbSrmzLe8jxcAcRigw7kko6BmXYePG5NRLVZcePYA1QSiN4oNen/AMrj2Mjwx3jEGYAFexUAZ6INJJZ/62aWTEnVKzso3KZaj2XlV+hW76CHBlJXr8KBEFakWAiXpgk3aXwATr6NVNN4/oeKS2wkIqTgzASPGCj7YQppD5KZM/rRYeKUS5JU0nTKXvo1aBJ5J8v4VWSqayApxUbgyu8mlIEWDDybUd7CboVmtLZJ4+ky4oAsY/B5JWmbnYGlyn4Hmm4Cj7DC1kBTb/AAbH2SfZYlQCuSbso8uYJqBQK8q8EmyTuwTjaAfOYqDGWgcTuSvEC+2FYtUm/wCGaFNadJcmSfssMC8nco0uWDLzgkEaTbX0U21ATNTE7AvLYW6CyqUbFgB4vku4LbMzP1jGBIGUfsy7ANa7YKtwkno0uLs0Bl3iXG9MuS6NceDzXggFxopdvMNeLuCmd4KBrrP6H+VaVg8m38/ASfsBeVFgVxilM3lTSWH7CM+GXkfHOxSv/ofD3hhWPGoVxhpcfTBqBGZGT4j+F/0ihcXcsfFj4sZgozEkY8W3Lg6eLa7wZrRCBcYSX0VlFH/CiSztFFnJeMdv8DE2AxGW64KV9A+KTAsIkoUzvBTEAkl2KeA48c5ZtcYgBPAYTNLilSigAkuxieNklXCSj2AyGeTSbKPOaC4pvOghnHcJSMOURlxpxhS2kZqrqGY6BKsCibxhilH7LxSZWgMXZQePFWi00/SAsQkrtlExSixoDMlyESrNwzKwB8fYJpLR0awZmwCJ/AkZqYyUn6BmLssRo14oVxTTA5p/6NJdtj49pkkktAHlBtVbDxqJcXmsC/pr/wDGGVhMbgBTdgt4JZLSCBcXsPF38HWysAeKzkZcmVWmXl47yyhj+0fFtMFybeoK5Pv/AEQK4xbaJcX+sW8QuPKIo5eTFcnXSy0S4pkUp9QdL0SW4TTCJP6abbXoFxi+jcQoNlMSMa0yjb7AzAW8m5DOt0g0uMWEEcYqtDHu/iKCObMri3/TfWcsvHtAY8UtFk21ky1PwASuwXGbg1p4Q+LfWyDEjpeLbHxjFKUDPhnDHwhqemD452yjMy6aWU5S8GxXCJx/wAXG5QRmknnI+LatA5z6Zj+s6viZ8egBcWrXn0UrNJPMBcbsDDTbLxWqdPFIz44bTAyuO8wPGGkm+8MVxw2RQuNTyC4x/BynEMb7ANFvtguLbeTSUVuQJcY8s1EZSbbzEPiEK45cZLjx9ukuN+p7KOuFDySmzMqlGdUotb/AKVf+EHjdDEvrLrDwALi32MUDKcVNJXYBESXbFpZKRb2BmVMz8tFusZ8IBL3sZ3lBfwV/pFEmlSbZb04T9ASvvJTcHi4ht2AL/HIO0dtqYJJ/KAYJY+ssp2EntAasXsyqkVK59kFBda00gXJpVolybc0FPfw0m1sK/n6hsw0VEuWfg7TBOZLzwBJy4LygeT7gN+WXj4gNeVdwFepQ4r2mKy8LQCsd5Jcm1km+oyrTeqBdjn20Hl8yS5AalYOtdB5YcoJu5/0gHx5Nxl/kqSbvWTT5WgZXF2sJ3TXliuIzV3V6AE8wnW8LBLjeWHEKTXaAUnMuCuMMpNuag+MmWApN7pRpxaBcmn2XlhzsCmMEuN2VuMtsq/4UKW1S8cEm64yrsAzyTCTBqk3Ff+BGfF1klMPJV8hkuckVjx/ya6Lxb1hI0k3cqeiysUDK4tYbDxjwxjbfoZEBJN+xynlgm1WUue37YGlqWBGySxNlK8uAC4tlGu2hmYy25SCn3ILi+xytk3jDTbCiZHrZmMpAOkq2HjEwkWyTiewLxy/hRPuhY39D9YD4/USWw8roz5YYGokxqmm6c07vRpclpYgG1+DycwjHlND5JgaXJdJjYzHF9mrCoW89GfKs1QvpAZpJi4ScUAx5dMLOiTpP/wAEUrkbTv8ADCkJYYG1yKuemYr9GlyqAsl5bJO9FQFNslv2Cb/CToGk/wClc62H4sElybCJvrJJtmvGKsFizIBWScLLuMk00gptwkK+4MqpxGs32VE22vf0vtGNrUf0lxoGI2xS8WMyMxiogFnChb72ZabfpIdrIAuLrB1G084yTV7KDi6vheT62PHi81ovFt4gEsOL/gVr2MjzMdIMr2BXlLpDXJ2U5JBpQA/yXaoJ9/8ABj6YLjnIFK8lvHoXdIuSaXoATiiB5RJNvaRpcXcoDHFdO5Hxa7FbqKN7/wBkUVjK7S8b3gk2gHKtJY7KsE7ihFyrZLUSJ50CUewq0tspRneRXFwCj6ZRik3seVQHOOu9B44ZucmgjS2BhLY+ORk7JJsAfHBlI0l7FcYwrKUL8waU9wIsgXHlB8pVCSUqDD2IjdxgvJ5hm/AXJrRRryUYLm/9mbgk5kgKkzSaZns1xU2hAyMsUcNj5JOAZFf6JezSfoA71WSQ+OCqSAsBKzSjVCqlQrCmyTSemV/6DAW8QK/hX0SaAVy8fpN16UDyy4V6ArnaQrlDP8ppcriAPl5ZZJt2Qz5ZYp/gFy3h6GNLtma2N/gGWnZDSthmx1iuQGl/j2NM+QUDSfL8ZKp/gJtqCn/oC/Msa+PSZdmfJtvGgLyf/pElQrz9FPfoA/ECTWBbacRZnQAq3CabxkayV1QMLDNVuhnYpuAEbe2jWUCbWkVYCk3YHjHvWiXsm/QFHvZJNpjkl8wALi29i+DS3Bbj2V32BnK9s0uRSvH+2UlyBV0UlMszazVuAMuvCYRpGnYEfsisNNvYpDHWUwBReywkEYPQFeiTUJL0WrQpxtmauhiKRhFQqbFhhMCwg0aqa+hM/QM+Q24RmGksewqRXPstokktgaTSWDVUM1XIpfoQ+ZKPLMriNSxgqG+gswpn6SbYVIB8myquWyTX++mKSTwBbXoL0Lx0XeEBmtVF5OaNWJ4aMrlaBLZpMOhv0BtfZN3AJqNlc0Cv+yTfbJ50SdQBtFSWsjpRoCy+yTK4CgbTmivJ6wZsZpcsgVheU1/wt66KgPlEZ8m38Ksy+cegN1/gJtoLWKcArGCbryTbQVvoBq/2VHrIazr0BJcmvUKvRJ+9Gq5IAJ4bBNpmo0gyvoFXvAVpmtoz43NAHyaZJzATP4aQDfoN0q0UfwCTZrOzKy5sbAJ0LnZWsYoBJe9hYNmjMjAbfgMrUVAk9ljdx6DGqGrMhT9wVSewxYUXsBteQ5Ks0sJsz5KeyAq6KimoXjnYBBSppccCuKkAxHpkkkro2+MqJJNbyBnApp9kuKb2x8UmVBjtlOJqJ7WQ8c9IBUn4ErwPikt4KJrYGcXsL/lvZrxJJWoCq2SXo1El0WJGUZ22CSz6N+K9mZ6cRAct4dK0uOXDWErABNJ5YtpOmE0KavbArWKUwKaWRTTAyuyeUL5Rk3igZTtpWMVvVDk0gFOYGmeLzk05oBTqw0SBNJxusVy4vCANt5hnks5NtokkBlaJJ1k3nBri4rAM56yxSfYvkOPUgGUsZGF5XEHusASaHENJr1oz5ZKB4qC7xk2lVrJlRaQF0SbaxobsE+oBh5+ik0t7NJKBpPpMDOYKXJp3CJ4NfuSDOV2QtVg7oC42m15N9GVUtjYiizl4QRr7SV+Gk8fUBmYCDXdRAu0kQGLlr8B69F4psom5SKuKtNKIvHHZLjEEHJKNB413BtcMMz45aTKCOf8AiBrTpvxfbSMzDSZBpKIoo81slVilGsFFMbJcCoqrTAvFhI9munnCMy7AqrgVEvoeOTTQBLpksCk1ch41zYFj2XFWs0uCS6JKYeQBrMuSXFt5Zrln4ySjKM+Kb6i6LkvbNeNbrBpe6QZ48a8MuSqwxXF15n4T4xVAY48Et4NYQpr2O26BipPPXseMr7GLWEOFoAmci0kWG70TaoGcN4J8U9Q0v4XJY2BlcRn0lmjpUA8U+iU4vaRWoO3ANS12mZVnIpb/APApJKACWdmvJJQzymjKSy6Bu8daBRBc7RXr0Apr5kbDFJ8gNvkVX9OdFNLsDfl6MWNoG1pEm3hSgb8sZBcsQk1MhhPLA1cEn7RWrKJOFDVPRVMG1svKAWWy2rMkuWyteABVob7QZyMiAIqVaLy6LPWiAbmgXwd//wAZZAFW7mFp4jFLk04U2oiKlWsi62y8YgXG5bCKfRkLxzE9FGmUC4t2hMxYNAuLT3AFcZ2Xit014/QnoCk9spPhTku00STmWBnx8nl4NLj9DNYpVbAsIt4QTtjGu5QJKgk6MmUzKU7YDHZ6FKPbZLRVpPoBSKemHVtf00l7KD8ZddMpkvD/APYA9gl7v5SkbyTV7AUkxSSMqIamA1B2WEmqUSWwHilphhuUsx9CkkukAJJPZbZYuGUV2QS9A/RpIyuNfWOgHilqlFYsj4pV6+ElxW8AEjeoSZRNzYeMewKpscR9BeIpLM7KBbgzoakukwuSAijpmTsY5NF10gCJGbGbi6CK0DKWTSSRRDVABZYtFY70VrAPJehTw/hVLA4mNADa3sqhm6SdcgEmWaaWtFK8ooFhDhL6WArnoCS9pFyy9QVGL5JJ0DKrTLbiL8x+km07ogeukgnY+PbKUCXGovGP2Mf0knaijPis7DxdrbZuV7gSPdAFwhPiaSb2E20AV5RJROso13j6aScAw2+hV02a8W3rRnO5QM8q3DSwoDTuTUxtAHwpaUb7iFcaAJP2DTRqMGncEGf6CbN+OCS6QFMV5FYReL0xXHBRmZ2aT9IJyTiKNY2Acs6Myo2uLby8DMAc/D0ySSZqCuOADFoxJD45KJYxALiotphyjeyTrmR8cbwAKWIoriL6aXFKg1GARLbKJLcHxTVeCXBcnW/4gM1ha7cI2+M7hnwzSCSmSndlNeKm6C4VtgC48WntmkldwolkEr3soogwk/f0ZbSfFfCCSizDLjdppNNPNYeOdgThRP0aS/pmdICSVf8A59BErmm0rhx0pxbA5zi/xCkvdbNtJPoEpe/gBjjnDJO9QYpCSRRRQMDibLilmIA8oiTddGG0uKXXwIzVx6BNJaQ3in7LxTy8sKPJNDYh48Ur6LkuPbANtYRNEo9IW3KBhb7HX6Mb3mlG3jAFnZZgtRewTbbmAMpcq8DGjSTTzoK23gATz2Sqoyv0ikuQLyJcm1r+ljNNJqYAE3vdJ8s6wXkp/wCgqbygC4eISb9DaXlFgBxOwbSWmZXNvoa8gKbbFpwuLLyrZQQJnCN2hUswgJEKyoTd0CdcApKlko30Njxka+8AVBVlX7oOyJOgXjWKXSQcXv6N5NaS/oA1V7Gd6CtKIo/9gaSSTiLTaplJpbQTlGk4BtKr0iai9+zPFOQZnYDOmw/0hSd2WbACOvuh4puO46RpKO4wHljBA+MwZ8Wn2hrr9IUm2s6APFex8SrrylAbYBPWR8WFjmBVstYEuLWF/sngvaTDqWAKTayXjMsksbiJP+gXjjZLil6/WSbYz30UHikm9kuKeETTarcBL7vVAeXFKhPuGXje1gWpoAiT6/ppJLejM+2bC1wo1FnBVT2uw8esRFP+EQrxU0OGzMX6Xi09gaWHmFyk0ZXGt+ynYDX0VbDyVlGxdlF3kLHSrfwuTSx2RV5GuPJL1DKanssJiDXLknhZC+sAuSd+EmrlFDeT/geWXjJPlcwk23PZAlV6Ma04i/QNpcfZVQy39JSAVVBqr2KSb0UiiAEknsfIEkmaiuP+gCeRfo0ogwldfoB5eg8mno0uwsANp9Bo2+SSMWsEXFu+h8rhBt4LFIFcvl+kuU0gqX9KqlDaS5MG0SaRBq9ZwVdDyeQ/8gaThVr6ZrWjVi+souPI1TNbNXGUAptqf9CtPt/SXIzWn2BPk22qVaZLCbYVfSCrzRXJtN1IFywWaAcm/wDZLyeCfKP6VqZFXl/lpjaY8hroGlU9snylWwTwXktFRXky8msQlyTZmtPaCunk2g8nZgFyi0Y5cs4A3y5NvZm8rhkuWMhdqAbTaVqNeWDmuVUSgprcCN37rcRmcnS8s/RXJrUKJceTtahTOXsU23hkwM/5NvLNLjF3TK5Rl5bZAvPtDxWN/wBZjybetGlyc0Arirl/7NNbMX2hv6BKRp9lhOlV7RYQCnxmaKSjSMkovYC3EY8k29k30SWOijW1MIEh6DGv+AYj1RSnZLiSWyAhpLpmY6aSCqSykks1g632XFMI2lnLlKJItbKVMoatWBE286KRB4utgaSwwgpVd0GsQCmHWZidyM7rKEB45NeKS3TCyzSVzQCL2xTirZqegcbyBmpulhsfFClABJN7FRaKpfgppplGdseLTcKJvJKIDVKoVAnFICqa+GcXCNeWTN/UA1JZMPlejW2UXoASjHySeYVXsynkC5NGbMGsWhSKFDXHGUCQ1JYAiUbK3IVMIcP4Z5eJozE2FS5RwrP0pF1TNrIFvsFlmsIUlmAFwSYqEigWMiWCSTAU8DE08ko96CoIrsVvJKNsUks1frAIFLyWjSaasAzkls1iZDvHRFElH9FO6Kr4VArGZSecm5XrBRrQGZnNKdsY+8FK89ATRmO5N+OcGeSaq0BLeKNSUlC5BNvYU3so33sF6rL/ACAY0yTu2Z/TSUCNVt+kEauw/wAthnKyUbSeRWUYSZpYwsgMiMrydbaGP2EbtYF4t712UiFLASO1kAlnYrD7B8b3sfGL6A2/Simgk+lLl1gNT9sv7QSzGzUj6AJ0i8YivHRNY2yiS4vLTGJAlGaAlJknCwllBU8lEpQaT7JcVYOE8kB76JNPZS/grioBjFstNJL2URQDL9WFPg8VWTSRBTDDVLbhPjF2FDazsqlskknku2A4lMrIxEsN9thGZkYk9onxjzsMQiteRnC7gI1FNlEvuS2iqmwuMAOvgrIJK7NJrSAlt+iqoTJRUIvJWDsFFUbWmgMuCkkg8VSkwgGjgyo0aacwAeWMJDlVtGUmamMgScw6WXSlukirSAVWs7BhW1sFygGlXgplkm1nP+yuXgDFa6LvcFNtBhvOUgo/yTGNd0OWAytAKb6L/L4C8mmKTWoBKv8Ahr4gTiwkVivZUalRJbyZTbUNXkkAu+9Anhk3yeMAk6wNLUKNszaVdIFJpss/Sdmew41AarRJ9sym2zVAcX2UxDOSrgDxXt4J8STwKz3WUM/Cik3A1Sk2wGpqIEosgkq4TTWgFJdsJTSTRmNvdAknRSXYT61Ay2AytvovHGGS4zspjYAk1c0pfhRrVaCbrhApSp/wI1aMzkp/QMpNutolG/wZE0+w8UgqwHkkySVaRPjlgKdbpl7KPQJZeSBU7H2SSTyySVeSjLs6hJE4KaeEQApfSmR/WATPRpYwwv0Vx+5KNJq0bxyYqT2mxSUqYRpJN/8AkXJjP4Y/xXZpNTJRJSlcT0GPYPlCDScdZPk42ZTaYcuTYD5NLTLybMWa0SbVCt+RLk70Zs0KCN+WPYXGMIE4S5NJlAuSSJPY+XUM+QDyan0ynWal+FpTsAcSZeSagWosPADxdVZqQyojXkmsdAKcF8n62ZU6Q1Uoq0FvdK4CzaINZaiLKv8A0FyV+LZeT0gJtll6YMeLqYFleiW+2VdJYYBlObNKtA8YiJPk94oDPbGRbCUeoBW9lItwlFoUqAfhdDoLfwBTc3TMbbmEa/DNdtKLKtaYXMTrGuAQKxaMq3TNetErkDWWg8Xukk0iSYFJthvtoY2FYETU7wS2PjUwMYSiB4UrYtK4JcaiKyv0VMvTFcGnaXi/4AKFBSiY+NCMeLYrjDUmhSvsYM+ONk0a8ZrJmNgSSK5YTcJJN4YVTIpVlFqmlxjYQeJSIdlKAVsE4aUXQdVgC5ZgtqNFe4ZrdAagoS7FLphUm9ChtJNJ+yoli0lypN3EJY9MA8slUtwcQonh6IHyUaM26DQ4hRmVmlEZxaat0BLOhsJJLQOf6A1UkVntouDTUB8s+wFNOoU/ZmxVB5ZgGk+Kbmyif6XHQqbYEml0EnWh5NfIXHldKIoFlmm4+ivcJcvgB5JbJOpsdupYKKNK4IDPr+D4uZHj5TSGtKtwAmMpElj/ANFlhW+yiVbY60EmLCuGpQFNpPAVuslyq7ZJp7wQHRm1+jdxgzHbgDLb/wDo1n8JPdUhq1dAFafuFamCbz0xTdfaAMso7WLfJLolewCOdGspbJKBG8gC4014T4SX8NPio8iDC4pvZqJrZLi19CNYYFPgKNYpcpMMEm3uIC90VXmwzyd7gcX1QNvPYNTstUI2nWAYpb+FY8Fl7Ipi2Ub6BKYFVsBS2myw6qGeiyEaSS2WNmLMGlJsCw71CmM6CYc7LqUBx0qZexvSdJS0CgYFtPIJcewFRaGZBSPGCuWukUV/GXHkmwizmkl4uCDUy85ZiVvbNeKfsvFMASSQxJQqqVX9AG0Sj7KeSyhiWNAK8QuSUQwATQLdNWEotgVSWc/CTT9lU6jSSEElVcJIlKTaX0zhv0ijXJoE0+wtWWjSSWwiT4/DVSWIZT4umk01ilBZoeswvJcXoHyqAm8BCXKoq/wiqdQWonkk81zAPlXoAWFkrmIvJMLMECnsril5Y7MvlMRgNwScRR7mfQJu5ioFc4abNLlOlkw7fgqwBuTSwjCaT+mly8nsC5OhX0VbZd2gaTekazozxeSarA0n/wDZi0Zl5YLi2wLxbVpfBa5JaDOoBlrPsEnMG5DOmAV6ugrWxayCyyCSfYLeDazUCSoVZbFJlnJIIfF5yXj7eCeO2Vq2ANKuNsVrQbY/E2Bn3BxMKlMbCuRAKZfoRspdoCmcsP0fF+yj9gKahVXZJY6bJJFE1+EltCk40i4qXr2BTGAk7F6COAVTB47wWnCia2QS5enonjvDFcUlQiA0uPGYHawYSQ2sDSaStQSsklGGFc5Ade8Gk8HNPMtZpYU2BYtqHEMTJpK+iiT43UNVHOJO4NNpUBTSb1nVNVSI5rxbjZqp2NBFc5Ly9IqmiqSChcosUvK9QFyjwa8p+gNcBNpaHyTwVQGeyv4FzUSYDZ08mk0tmVypeTsiQE32Zrbfo3VM5MVSAKc9MrgU0l2XJpLYGVk0n6/4FqFNJAFf2lcY2HlkqkQb48nnBqxbrZyXLLN1fSwK5Sok68BUvpeW2ijVae0ZreYoVegvogLsMj3ug26A1vSoeLL/ACuDVaxSAVRJ5FfhrCWgMZYZRqRlkDL5VZRJsWrjQfAFV4sKQkm67okmkAeyj/g3AQBTwFbNSMyssBacKKwUtwGmUKReOZgFgUm0BIpb8DS2jOtgNyNidZnCVpLOWQXi3noeixnJYW4App5bJqmVGLcAUsRlUjFLvIVurTZlNNtoMJWwE2nh4A34ra2VV7C+zMSeHQN4feSs2zDYcuS6IN2scT6clyuzaaa9FQ1X6zSamMmIunSSSeQNeSWnkaZnFMfIBTQ1GaoyTxmANjkDlyRWFU1sKkw8s4BtvosbA0uShVXRJqWmfK2aCN+VQeSXRhOt+hTTedBWlzT/APkavjMJrMySeQNVK+y45/CSVGpPGQhSSQNq7DyVKX4Apq+zS5K/phNJTA3jfbA2DanYLmnfXwvOOFFUitVwi8lDPkmwNVTDBKusKv72NU2QK5JbKpXDM1F5Ab67YpnPy+aJcuPvIHSoPIKp7BNQB5cs6DIPkCePqIrSwxSbtM+RLk7kqNR+wjHyS+guVAkuXskrhMnyfcySTQGkmgbcheRm1tlDlokn0wuMlxUAxQywwy1oyrTVwmWlszh6bCdgbTVG0wsIQFNZHDRhPJqYAl6Qrj9MydilXsCkfsI6aa9aMqgPUBLNrZSu01x44+lGYHikMSZbyQHihSWnsoiXQGqrCsRmZ3stAT5UUzLZJrsK0/0VyOdVG9gdE1mmeWXjAJ+y+gSZXJbwMzdsIlWnYNRkL0BupvoLATuGTyFPHl7NJ8TmnGKcA1YzSeHhHK5NJqUI2kr0aqmDnYsAuSaKjWFm0sMzcMzcsiuqSSLDdbOb5f0k6B0bUeAXKP0Yv0k0sFHSpaCmfLoFyIN+VYOPNM2FQNeUJNPKCpoKvYG7nLLy9MwnK2HLktBWnyoeRlMkQbTX6NMX0S5VlGvJpex48mkZoLk9JBHVO5aK/hz8sbJNlGvJh5MzyyWUiDa5JEn9Oab7NLIAl0UdFapBRhMrXsvGkkBT6UKMJQJI1lIzJ2SrCFOPI1ZYT2QUeWR45CVilAjSg2GdIrlgTaYL9DJaClsqoGSmANJha4GrkhomQUrEQKjLAJlgDTJR7bM9AmUdMIvIxb2XewNXGyRmtAn9A6L0WDNKgNryJnErJNr8AVus0lkwma+gKRYJcsBVAiDsrAoUhYyqYfhBvaBL6ZTaGga6CqEs7BpeyhSrbTGGVgl+gNgWjKZmSB5aCD0VAFTSiQJFSKpkZCTK0qHoyk6NACooEoLKGwqiX0pdAUJL0UyWUIP/2Q==");
  background-position: center;
  background-size: cover;
  user-select: none;

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .close {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    margin: 0;
    cursor: pointer;
    color: #ab0707;
    background: transparent;
    border: none;
    font-family: 'EB Garamond', serif;
    transition: color 0.05s linear;

    &:hover {
      color: #ff0000;
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid #ff0000;
    }
  }

  .adventurer-portrait {
    width: 100%;
    max-width: 15rem;
    aspect-ratio: 1/1;
    background: rgb(2,0,36);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgb(69, 69, 84) 57%, rgb(85, 112, 117) 100%);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .name {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    width: 100%;
  }

  .adventurer-data {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.2rem;
    width: 100%;

    & > * {
      margin: 0;
      width: calc(50% - 1rem);
      text-align: center;
      padding-inline: 0.5rem;
    }
  }
}
</style>