feat(ui): Add dark tooltip background and rarity border color support

- Change tooltip background from light to dark black
- Add tooltipBorder line type to TooltipLine for tooltip-level styling
- Add borderColor prop to MouseTooltip component
- Apply rarity color as border for relic tooltips
- Reserve existing color/borderColor/bgColor for future per-line styling

Thanks to monddoc for the suggestion!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: justjuangui

src/lib/hellclock/relics.ts

@@ -1010,6 +1010,13 @@ export class RelicsHelper {
       this.getRelicRarityColor(relic.rarity as RelicRarity),
     );
 
+    // Add tooltip border with rarity color
+    lines.push({
+      text: "",
+      type: "tooltipBorder",
+      color: rarityColor,
+    });
+
     // Relic name with rarity color
     lines.push({
       text: relic.name,

src/lib/hellclock/utils.ts

@@ -174,9 +174,9 @@ export function spriteUrl(sprite?: string): string | undefined {
 
 export interface TooltipLine {
   text: string;
-  color?: string;
-  borderColor?: string;
-  bgColor?: string;
+  color?: string;           // for future per-line text color
+  borderColor?: string;     // for future per-line border
+  bgColor?: string;         // for future per-line background
   icon?: string;
-  type: "header" | "info" | "divider" | "affix" | "affixCol";
+  type: "header" | "info" | "divider" | "affix" | "affixCol" | "tooltipBorder";
 }

src/lib/ui/GameTooltip.svelte

@@ -11,7 +11,9 @@
 
 <div class="tooltip-content">
   {#each lines as line, i (i)}
-    {#if line.type === "header"}
+    {#if line.type === "tooltipBorder"}
+      <!-- Config-only line, not rendered -->
+    {:else if line.type === "header"}
       <p
         class="text-sm text-center font-semibold mb-1"
         style={line.color ? `color: ${line.color}` : ""}

src/lib/ui/MouseTooltip.svelte

@@ -17,6 +17,8 @@
     edgeMargin?: number;
     /** Custom width class (default: w-64) */
     widthClass?: string;
+    /** Custom border color CSS value (e.g., "#ff0000", "rgb(255,0,0)") */
+    borderColor?: string;
     /** Tooltip content */
     children: Snippet;
   }
@@ -29,6 +31,7 @@
     offset = 12,
     edgeMargin = 8,
     widthClass = "w-64",
+    borderColor,
     children,
   }: Props = $props();
 
@@ -61,7 +64,7 @@
     style="left: {position.x}px; top: {position.y}px;"
     role="tooltip"
   >
-    <div class="bg-base-100 border border-base-300 rounded-lg shadow-xl p-3">
+    <div class="bg-black border rounded-lg shadow-xl p-3" style={borderColor ? `border-color: ${borderColor}` : ""}>
       {@render children()}
     </div>
   </div>

src/lib/ui/RelicInventory.svelte

@@ -235,16 +235,19 @@
   </div>
 
   <!-- Mouse-following tooltip portal -->
-  <MouseTooltip
-    visible={!!activeTooltip}
-    mouseX={activeTooltip?.state.mouseX ?? 0}
-    mouseY={activeTooltip?.state.mouseY ?? 0}
-    placement="right"
-  >
-    {#if activeTooltip}
-      <GameTooltip lines={relicsHelper.getTooltipLines(activeTooltip.relic, lang, statsHelper, skillsHelper)} />
-    {/if}
-  </MouseTooltip>
+  {#if activeTooltip}
+    {@const lines = relicsHelper.getTooltipLines(activeTooltip.relic, lang, statsHelper, skillsHelper)}
+    {@const borderColor = lines.find(l => l.type === "tooltipBorder")?.color}
+    <MouseTooltip
+      visible={true}
+      mouseX={activeTooltip.state.mouseX}
+      mouseY={activeTooltip.state.mouseY}
+      placement="right"
+      {borderColor}
+    >
+      <GameTooltip {lines} />
+    </MouseTooltip>
+  {/if}
 </div>
 
 <style>