feat : ux update for stygian

components/admin/stygian-editor.tsx

@@ -1091,7 +1091,7 @@ export function StygianEditor({
                       value={String(position)}
                       aria-label={`${positionLabel}: ${label}`}
                       title={label}
-                      className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-2 py-3"
+                      className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-2 py-3 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset"
                     >
                       <StygianBossTab
                         boss={boss}

components/public/stygian-guide.tsx

@@ -112,7 +112,7 @@ export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalo
                 const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
                 const label = boss?.name ?? `Boss ${position + 1}`;
                 const positionLabel = ["บน", "กลาง", "ล่าง"][position];
-                return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-2 py-3">
+                return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-2 py-3 data-active:bg-accent/50 data-active:ring-2 data-active:ring-primary data-active:ring-inset">
                   <StygianBossTab boss={boss} position={position} priority={level === 110} />
                 </TabsTrigger>;
               })}

components/stygian/stygian-boss-display.tsx

@@ -127,7 +127,7 @@ export function StygianBossCard({
         <header className="text-center">
           <h2 className="font-heading text-lg font-semibold">{boss.name}</h2>
           <p className="mt-1 text-sm text-muted-foreground">
-            Level {level} · HP {Math.round(boss.hp).toLocaleString("en-US")}
+            Level {level} - HP {Math.round(boss.hp).toLocaleString("en-US")}
           </p>
         </header>
         <div className="flex min-w-0 flex-col gap-5">