home stretch just gotta make the select thing respect the unlock flow and max powers

ie: cant unlock powers early
cant unlock more powers than u have maxPowers

src/components/power.svelte

···
 <script lang="ts">
   import { type Power, type Locked, isUnlocked } from "@/powers";
   import Self from "./power.svelte";
-  import { powers } from "@/stores/powers";
+  import { powers, mutatePowers } from "@/stores/powers";
 
   const { power }: { power: Power | Locked } = $props();
 </script>
 
-<div class="wrapper">
+<!-- <div class="wrapper">
   <div
-    class={`power ${power.status !== "locked" ? "unlocked" : "locked"} ${power.status === "frozen:selected" || (power.status !== "locked" && $powers.powers.includes(power.name)) ? "selected" : ""}`}
+    class={`power ${power.status !== "locked" ? "unlocked" : "locked"} ${power.frozen === "selected" || (power.status !== "locked" && $powers.powers.includes(power.name)) ? "selected" : ""}`}
   >
     <div class="entry">
       {#if isUnlocked(power)}
···
               {/each}
             </dl>
             <p>{power.description}</p>
+            {#if power.status !== "frozen:selected" && power.status !== "frozen:unselected"}<button>Unlock</button>
           </div>
         </details>
       {:else}
···
       <Self power={child} />
     {/each}
   </div>
+</div> -->
+
+<div class="wrapper">
+  <!-- locked power -->
+  {#if power.status === "locked"}
+    <div class={`power status:${power.status}`}>
+      <img src="/locked.png" alt="" />
+      <p class="headline noto-serif">Locked</p>
+    </div>
+  {:else}
+    <!-- unlocked power -->
+    <button
+      class={`power status:${power.status} frozen:${power.frozen} unlocked:${$powers.powers.includes(power.name)}`}
+      id="preview"
+      popovertarget={`tooltip-${power.name.replace(/\W/g, "_")}`}
+    >
+      <img {...power.image} />
+      <div class="headline noto-serif">{power.name}</div>
+    </button>
+    <dialog
+      class="tooltip"
+      id={`tooltip-${power.name.replace(/\W/g, "_")}`}
+      popover="auto"
+    >
+      {#if !power.frozen}
+        <button
+          class={`unlock-btn ${$powers.powers.includes(power.name) ? "unselect" : "select"}`}
+          onclick={() => {
+            console.log("clicked", power.name);
+            if (!$powers.powers.includes(power.name)) {
+              console.log("select");
+              mutatePowers((n) => ({
+                ...n,
+                powers: [...n.powers, power.name],
+              }));
+            } else {
+              console.log("deselect");
+              mutatePowers((n) => ({
+                ...n,
+                powers: n.powers.filter((p) => p !== power.name),
+              }));
+            }
+          }}
+        >
+          <div class="unselect-txt">Unselect</div>
+          <div class="select-txt">Select</div>
+        </button>
+      {/if}
+      <img {...power.image} />
+      <div class="headline noto-serif">{power.name}</div>
+      <dl>
+        {#each power.meta as meta}
+          <dt>{meta.name}</dt>
+          <dd>{meta.value}</dd>
+        {/each}
+      </dl>
+      <p>{power.description}</p>
+    </dialog>
+  {/if}
+  <div class="children" style={`--rows: ${power.children.length}`}>
+    {#each power.children as child}
+      <Self power={child} />
+    {/each}
+  </div>
 </div>
 
-<style>
+<!-- <style>
   /* positions */
   .wrapper {
     display: flex;
···
         }
       }
     }
+  }
+</style> -->
+
+<style>
+  /* colours etc */
+  .power {
+    &,
+    & + .tooltip,
+    & + .tooltip > .unlock-btn {
+      border-radius: 1rem;
+      color: var(--text);
+      background-color: hsl(
+        from var(--base, var(--background)) h calc(s * 1.5) 16
+      );
+      border: 0.2rem solid
+        hsl(from var(--base, var(--background)) h calc(s * 1.5) 48);
+    }
+
+    &.status\:unlocked,
+    &.frozen\:unselected,
+    &.unlocked\:false {
+      &,
+      & + .tooltip {
+        --base: var(--red);
+      }
+    }
+
+    &.status\:locked {
+      --base: var(--gold);
+    }
+
+    &.frozen\:selected,
+    &.unlocked\:true {
+      &,
+      & + .tooltip {
+        --base: var(--green);
+      }
+    }
+  }
+
+  /* typo */
+  dl:not(:empty) {
+    padding: 0.5rem;
+    & dt {
+      float: left;
+      padding-right: 1rem;
+      font-weight: bold;
+
+      &::after {
+        content: ":";
+      }
+    }
+  }
+
+  dl + p {
+    padding: 0.5rem;
+  }
+
+  .headline {
+    font-family: "Noto Serif", serif;
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
+    font-variation-settings: "wdth" 100;
+    font-size: 2rem;
+  }
+
+  /* looks positions */
+  img {
+    width: 5rem;
+    height: 5rem;
+    object-fit: cover;
+    border-radius: 2.5rem;
+  }
+
+  .power {
+    display: grid;
+    grid-template-columns: 5rem 1fr;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    text-align: left;
+
+    &.status\:locked {
+      width: 15rem;
+    }
+
+    &.status\:unlocked {
+      width: 35rem;
+    }
+  }
+
+  .tooltip {
+    margin: auto;
+    max-width: 65ch;
+
+    & img {
+      width: 4rem;
+      height: 4rem;
+      margin: 0.5rem;
+      float: left;
+    }
+
+    & .headline {
+      height: 5rem;
+      line-height: 5rem;
+      margin-left: 5rem;
+    }
+
+    & .unlock-btn {
+      padding-inline: 1rem;
+      padding-block: 0.2rem;
+      margin: 1rem;
+      float: right;
+
+      display: grid;
+      grid-template-areas: "stack";
+
+      & > * {
+        visibility: hidden;
+        grid-area: stack;
+      }
+
+      &.select > .select-txt {
+        visibility: visible;
+      }
+
+      &.unselect > .unselect-txt {
+        visibility: visible;
+      }
+    }
+  }
+
+  /* child pos stuff */
+  .wrapper {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    gap: 1rem;
+  }
+
+  .children {
+    width: fit-content;
+    height: 100%;
+    display: grid;
+    gap: 1rem;
+    grid-template-rows: repeat(var(--rows), 1fr);
   }
 </style>

src/pages/index.astro

···
 <Base title="Astral Powers">
   <Fragment slot="head">
     <style>
+      @import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
+
       @media (prefers-color-scheme: light) {
         :root {
           --text: #151314;
           --background: #f3e7ea;
-          --primary: #8ac79c;
-          --secondary: #d77fab;
+          --green: #53f9c7;
+          --red: #bb2541;
+          --gold: #c59c2b;
           --accent: #cc2e7d;
         }
       }
···
         :root {
           --text: #eceaeb;
           --background: #190d10;
-          --primary: #39764b;
-          --secondary: #7f2854;
+          --green: #06aa79;
+          --red: #da4460;
+          --gold: #d4aa3b;
           --accent: #d13181;
         }
       }
···
 
       #head {
         width: calc(100vw - 2rem);
-        height: 3rem;
+        height: 4rem;
+        margin-bottom: 1rem;
       }
 
       #body {
         width: calc(100vw - 2rem);
-        height: calc(100vh - 5rem);
+        height: calc(100vh - 7rem);
         overflow: auto;
       }
     </style>

src/powers.ts

···
 export interface Power {
-  status: "unlocked" | "frozen:selected" | "frozen:unselected";
+  status: "unlocked";
+  frozen?: "selected" | "unselected";
   name: string;
   description: string;
   image: {
···
 }
 
 export const powers: Power = {
-  status: "frozen:selected",
+  status: "unlocked",
+  frozen: "selected",
   name: "Eldritch Adaptability",
   description:
     "You become more adaptable to other envirmonents. When entering another world your body automatically adjusts to endure there better. This can include new languages, gills, cultural understanding, and more.",