exit button for adventurer details popup

src/components/AdventurerDetails.vue

@@ -1,5 +1,6 @@
 <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"/>
@@ -42,6 +43,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .adventurer-details {
   display: flex;
+  position: absolute;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -52,19 +54,51 @@ export default defineComponent({
   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;
+
+    &:hover {
+      color: #ff0000;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #ff0000;
+    }
+  }
+
   .adventurer-portrait {
     width: 100%;
     max-width: 15rem;
     aspect-ratio: 1/1;
+
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
   }
+
   .name {
     display: flex;
     justify-content: center;
@@ -72,6 +106,7 @@ export default defineComponent({
     font-weight: bold;
     width: 100%;
   }
+
   .adventurer-data {
     display: flex;
     flex-direction: row;
@@ -80,6 +115,7 @@ export default defineComponent({
     flex-wrap: wrap;
     font-size: 1.2rem;
     width: 100%;
+
     & > * {
       margin: 0;
       width: calc(50% - 1rem);

src/views/AdventurerView.vue

@@ -3,6 +3,7 @@
     <AdventurerDetails
         :adventurer="selectedAdventurer"
         v-if="selectedAdventurer !== null"
+        @closeButtonClicked="selectedAdventurer = null"
 
     />
     <section class="recruit panel pinned-paper">
@@ -148,6 +149,7 @@ export default defineComponent({
       flex-direction: column;
       gap: 0.25rem;
       font-size: 1.1rem;
+      cursor: pointer;
 
       .entry {
         height: 7rem;