feat: glitter border on team/class cards, mobile-friendly class selector

- Animated gold border glitter effect on active team card and class image
- Classes selector: 2-column grid on mobile (no scroll), list on desktop
- Selector appears above detail on mobile (flex-col-reverse)
- Compact selector items on mobile (icon + name only)

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

src/components/ui/ShowcaseLayout.tsx

@@ -97,7 +97,7 @@ export function ShowcaseLayout<T>({
 
   return (
     <div
-      className="flex flex-col gap-6 lg:flex-row lg:gap-8"
+      className="flex flex-col-reverse gap-6 lg:flex-row lg:gap-8"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
@@ -131,14 +131,14 @@ export function ShowcaseLayout<T>({
       <div className="lg:w-[40%]">
         <div
           ref={selectorRef}
-          className="styled-scrollbar flex gap-3 overflow-x-auto pb-2 lg:max-h-[600px] lg:flex-col lg:overflow-y-auto lg:overflow-x-visible lg:pb-0 lg:pr-1"
+          className="grid grid-cols-2 gap-2 lg:grid-cols-1 lg:gap-3 lg:max-h-[600px] lg:overflow-y-auto lg:pr-1 styled-scrollbar"
         >
           {items.map((item, i) => (
             <button
               key={i}
               ref={i === activeIndex ? activeItemRef : null}
               onClick={() => onSelect(i)}
-              className={`flex-shrink-0 cursor-pointer rounded-xl border-2 text-left transition-all duration-300 ${
+              className={`cursor-pointer rounded-xl border-2 text-left transition-all duration-300 ${
                 i === activeIndex
                   ? "border-[#c9a96e]/60 bg-[#c9a96e]/10 dark:bg-[#c9a96e]/5"
                   : "border-transparent bg-neutral-100 hover:bg-neutral-200 dark:bg-white/[0.03] dark:hover:bg-white/[0.06]"