style(list): improve stats table arrangement accuracy

src/games/genshin/assets/index.ts

@@ -1,5 +1,6 @@
 import { file } from "bun";
 
+import BadgeArcana from "./arcana.webp";
 import ElementElectric from "./elements/Electric.webp";
 import ElementFire from "./elements/Fire.webp";
 import ElementGrass from "./elements/Grass.webp";
@@ -32,6 +33,7 @@ export const listBadges = {
   theater: file(BadgeTheater),
   abyssStar: file(BadgeAbyssStar),
   theaterStar: file(BadgeTheaterStar),
+  theaterArcana: file(BadgeArcana),
 };
 
 export const elements = {

src/games/genshin/render/list.tsx

@@ -133,10 +133,10 @@ export async function ListPage(
                       {p.towerStarIndex && (
                         <div tw="flex items-center">
                           <div tw="mx-[.3em] h-2/3 mb-[.2em] w-0.5 bg-[#E3DED6] shrink-0" />
+                          <img src="/b/abyssStar" tw="-mt-1.5 mx-[.1em]" />
                           <span>
                             {p.towerStarIndex.toString().padStart(2, " ")}
                           </span>
-                          <img src="/b/abyssStar" tw="-mt-1.5 mx-[.1em]" />
                         </div>
                       )}
                     </div>
@@ -151,11 +151,20 @@ export async function ListPage(
                   p.theaterActIndex ? (
                     <div tw="flex items-center">
                       Act {p.theaterActIndex}
+                      {p.theaterStarIndex && p.theaterStarIndex > 10 && (
+                        <div tw="flex items-center">
+                          <img
+                            src="/b/theaterArcana"
+                            tw="-mt-1 ml-[.1em] -mr-[.2em] w-8 h-6"
+                          />
+                          {p.theaterStarIndex - 10}
+                        </div>
+                      )}
                       <div tw="mx-[.3em] h-2/3 mb-[.2em] w-0.5 bg-[#E3DED6] shrink-0" />
+                      <img src="/b/theaterStar" tw="-mt-1.5 mx-[.1em]" />
                       <span>
                         {p.theaterStarIndex!.toString().padStart(2, " ")}
                       </span>
-                      <img src="/b/theaterStar" tw="-mt-1.5" />
                     </div>
                   ) : (
                     <div tw="text-[#C7B7A5]">Not yet attempted</div>
@@ -293,7 +302,7 @@ export async function ListPage(
       {
         src: "/i/stygian",
         data: assets.load(
-          `/ui/UI_LeyLineChallenge_Medal_${p.stygianIndex ?? 1}.png`,
+          `/ui/UI_LeyLineChallenge_Medal_${(p.stygianIndex ?? 0) >= 6 && (p.stygianSeconds ?? 180) <= 170 ? 7 : (p.stygianIndex ?? 1)}.png`,
         ),
       },
       ...Object.entries(listBadges).map(([k, v]) => ({