@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/components/AIRoasting.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import {
+  FaRobot,
+  FaFire,
+  FaSnowflake,
+  FaBolt,
+  FaArrowTrendUp,
+  FaArrowTrendDown,
+  FaRotate,
+} from "react-icons/fa6";
+import { motion, AnimatePresence } from "framer-motion";
+import { aiAgent, randomLang } from "../lib/aiAgent";
+import type { DashboardData } from "../types";
+
+type RoastItem = {
+  type: string;
+  target: string;
+  text: string;
+  icon: React.ComponentType<{ className?: string }>;
+};
+
+const REFRESH_INTERVAL = 20000;
+
+export default function AIRoasting({ data }: { data: DashboardData | null }) {
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const roasts = useMemo(() => {
+    if (!data?.overall?.length) return [];
+
+    const overall = data.overall.sort((a, b) => a.rank - b.rank);
+    const topTeam = overall[0];
+    const secondTeam = overall[1];
+    const bottomTeam = overall[overall.length - 1];
+    const secondFromBottom = overall[overall.length - 2];
+    const midTeam = overall[Math.floor(overall.length / 2)];
+    const mostTransfers = [...overall].sort(
+      (a, b) => (b.transfersLeft ?? 0) - (a.transfersLeft ?? 0),
+    )[0];
+    const hottest = [...overall].sort(
+      (a, b) => (b.lastMatchPoints ?? 0) - (a.lastMatchPoints ?? 0),
+    )[0];
+    const coldest = [...overall].sort(
+      (a, b) => (a.lastMatchPoints ?? 0) - (b.lastMatchPoints ?? 0),
+    )[0];
+
+    const gapEntries = overall
+      .map((t, i) => ({
+        a: t,
+        b: overall[i + 1],
+        gap: t.points - (overall[i + 1]?.points ?? 0),
+      }))
+      .filter((e) => e.b && e.gap > 0)
+      .sort((a, b) => b.gap - a.gap);
+    const widestGap = gapEntries[0];
+
+    const lang = randomLang();
+    const items: RoastItem[] = [];
+
+    if (topTeam) {
+      const avgPoints = topTeam.points / Math.max(1, data.daily?.length ?? 1);
+      items.push({
+        type: "praise",
+        target: topTeam.name,
+        text: aiAgent.leader(topTeam.name, avgPoints, lang),
+        icon: FaFire,
+      });
+    }
+
+    if (bottomTeam) {
+      items.push({
+        type: "roast",
+        target: bottomTeam.name,
+        text: aiAgent.roast(bottomTeam.name, bottomTeam.points, lang),
+        icon: FaSnowflake,
+      });
+    }
+
+    if (midTeam) {
+      const volatility = (midTeam.points % 20) + 5;
+      items.push({
+        type: "mid",
+        target: midTeam.name,
+        text: aiAgent.consistency(midTeam.name, volatility, lang),
+        icon: FaRobot,
+      });
+    }
+
+    if (secondTeam && topTeam) {
+      const gap = topTeam.points - secondTeam.points;
+      items.push({
+        type: "chase",
+        target: `${secondTeam.name} vs ${topTeam.name}`,
+        text: aiAgent.gap(topTeam.name, secondTeam.name, gap, lang),
+        icon: FaArrowTrendUp,
+      });
+    }
+
+    if (mostTransfers && (mostTransfers.transfersLeft ?? 0) > 0) {
+      items.push({
+        type: "strategy",
+        target: mostTransfers.name,
+        text: aiAgent.transfers(
+          mostTransfers.name,
+          mostTransfers.transfersLeft ?? 0,
+          lang,
+        ),
+        icon: FaRobot,
+      });
+    }
+
+    if (hottest && (hottest.lastMatchPoints ?? 0) > 0) {
+      items.push({
+        type: "surge",
+        target: hottest.name,
+        text: aiAgent.praise(hottest.name, hottest.lastMatchPoints ?? 0, lang),
+        icon: FaBolt,
+      });
+    }
+
+    if (coldest && coldest !== hottest && coldest.lastMatchPoints != null) {
+      items.push({
+        type: "collapse",
+        target: coldest.name,
+        text: aiAgent.collapse(coldest.name, coldest.lastMatchPoints, lang),
+        icon: FaArrowTrendDown,
+      });
+    }
+
+    if (secondFromBottom && bottomTeam && secondFromBottom !== bottomTeam) {
+      const gap = Math.max(1, secondFromBottom.points - bottomTeam.points);
+      items.push({
+        type: "danger",
+        target: secondFromBottom.name,
+        text:
+          gap > 50
+            ? `${secondFromBottom.name} is just ${gap} pts above last. The basement door is open.`
+            : `${secondFromBottom.name} is only ${gap} pts clear of last place. Panic button time.`,
+        icon: FaSnowflake,
+      });
+    }
+
+    if (widestGap && widestGap.gap > 30) {
+      items.push({
+        type: "gap",
+        target: `${widestGap.a.name} >> ${widestGap.b.name}`,
+        text: `${widestGap.a.name} leads ${widestGap.b.name} by ${widestGap.gap} pts — the biggest chasm in the league. That's not a gap, that's a Grand Canyon.`,
+        icon: FaArrowTrendUp,
+      });
+    }
+
+    return items;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, refreshKey]);
+
+  useEffect(() => {
+    const refreshTimer = setInterval(
+      () => setRefreshKey((k) => k + 1),
+      REFRESH_INTERVAL,
+    );
+    return () => clearInterval(refreshTimer);
+  }, []);
+
+  if (!roasts.length) {
+    return (
+      <div className="ledger-note py-6 text-center">
+        AI is still warming up the roasts...
+      </div>
+    );
+  }
+
+  const pastel: Record<string, { bg: string; border: string; text: string }> = {
+    praise: { bg: "#c8f7d5", border: "#a8e6cf", text: "#2d6a4f" },
+    roast: { bg: "#ffd6d9", border: "#ffb3ba", text: "#9b2226" },
+    mid: { bg: "#d6edff", border: "#bae1ff", text: "#1a5276" },
+    chase: { bg: "#fff3cd", border: "#ffe69c", text: "#856404" },
+    strategy: { bg: "#e2d9f3", border: "#d0bdf4", text: "#4a1a6b" },
+    surge: { bg: "#c8f7d5", border: "#a8e6cf", text: "#2d6a4f" },
+    collapse: { bg: "#ffd6d9", border: "#ffb3ba", text: "#9b2226" },
+    danger: { bg: "#fce4ec", border: "#f8bbd0", text: "#880e4f" },
+    gap: { bg: "#fff3cd", border: "#ffe69c", text: "#856404" },
+  };
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        <span className="scribble-kicker">{roasts.length} hot takes</span>
+        <span className="flex items-center gap-1 text-[13px] font-bold text-(--ink-faint)">
+          <FaRotate className="animate-spin" />
+          <span>live</span>
+        </span>
+      </div>
+      <div className="grid gap-2 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+        <AnimatePresence mode="popLayout">
+          {roasts.map((roast) => {
+            const p = pastel[roast.type] ?? pastel.roast;
+            return (
+              <motion.div
+                key={`${roast.type}-${roast.target}-${refreshKey}`}
+                layout
+                initial={{ opacity: 0, scale: 0.92 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.92 }}
+                transition={{ duration: 0.3 }}
+                className="hover-jitter rounded-xl border p-3 relative overflow-hidden"
+                style={{
+                  borderColor: p.border,
+                  background: p.bg,
+                  boxShadow: `0 0 18px color-mix(in srgb, ${p.border} 30%, transparent)`,
+                }}
+              >
+                <motion.div
+                  className="absolute inset-0 rounded-xl pointer-events-none"
+                  style={{
+                    background: `radial-gradient(circle at 50% 0%, color-mix(in srgb, ${p.border} 30%, transparent) 0%, transparent 70%)`,
+                  }}
+                  animate={{ opacity: [0.3, 0.7, 0.3] }}
+                  transition={{
+                    repeat: Infinity,
+                    duration: 2.5,
+                    ease: "easeInOut",
+                  }}
+                />
+
+                <motion.div
+                  className="absolute -inset-0.5 rounded-xl pointer-events-none"
+                  style={{
+                    border: `2px solid ${p.border}`,
+                    opacity: 0.4,
+                  }}
+                  animate={{
+                    opacity: [0.2, 0.6, 0.2],
+                    filter: ["blur(3px)", "blur(7px)", "blur(3px)"],
+                  }}
+                  transition={{
+                    repeat: Infinity,
+                    duration: 2,
+                    ease: "easeInOut",
+                  }}
+                />
+
+                <div className="relative z-10">
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    <span
+                      className="rounded-full px-2 py-0.5 text-[14px] font-bold uppercase tracking-wide"
+                      style={{
+                        background: `color-mix(in srgb, ${p.border} 50%, transparent)`,
+                        color: p.text,
+                      }}
+                    >
+                      <roast.icon className="inline text-[14px] mr-0.5" />
+                      {roast.type}
+                    </span>
+                  </div>
+                  <p
+                    className="text-[14px] font-bold leading-tight mb-1"
+                    style={{ color: p.text }}
+                  >
+                    {roast.target}
+                  </p>
+                  <p
+                    className="text-[13px] leading-relaxed"
+                    style={{
+                      color: `color-mix(in srgb, ${p.text} 70%, transparent)`,
+                    }}
+                  >
+                    {roast.text}
+                  </p>
+                </div>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/template/app/components/ColorWave.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useMemo } from "react";
+import { motion } from "framer-motion";
+import type { DashboardData } from "../types";
+import { getPlayedMatchRows } from "../lib/dashboardData";
+import { formatCompactNumber } from "../lib/utils";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+function buildWavePath(
+  scores: number[],
+  maxVal: number,
+  color: string,
+  svgW: number,
+  svgH: number,
+): { wavePath: string; fillPath: string } {
+  if (!scores.length || maxVal === 0) {
+    const base = `M0,${svgH / 2} L${svgW},${svgH / 2}`;
+    return {
+      wavePath: base,
+      fillPath: `${base} L${svgW},${svgH} L0,${svgH} Z`,
+    };
+  }
+
+  const points = scores.map((s, i) => {
+    const x = (i / Math.max(scores.length - 1, 1)) * svgW;
+    const y = svgH - 10 - (s / maxVal) * (svgH - 30);
+    return { x, y };
+  });
+
+  let d = `M0,${svgH - 10}`;
+  for (let i = 0; i < points.length; i++) {
+    if (i === 0) {
+      d += ` L${points[i].x},${points[i].y}`;
+    } else {
+      const prev = points[i - 1];
+      const cx = (prev.x + points[i].x) / 2;
+      d += ` Q${prev.x},${prev.y} ${cx},${(prev.y + points[i].y) / 2}`;
+    }
+  }
+  d += ` L${svgW},${svgH - 10}`;
+
+  const fill = `${d} L${svgW},${svgH} L0,${svgH} Z`;
+
+  return { wavePath: d, fillPath: fill };
+}
+
+export default function ColorWave({ data }: { data: DashboardData | null }) {
+  const waves = useMemo(() => {
+    if (!data?.overall?.length) return [];
+    const daily = getPlayedMatchRows(data.daily);
+    const allScores = data.overall.map((team) =>
+      daily.map((r) => Number(r[team.name] ?? 0)).filter((v) => v > 0),
+    );
+    const globalMax = Math.max(...allScores.flat(), 1);
+
+    return data.overall
+      .sort((a, b) => a.rank - b.rank)
+      .slice(0, 8)
+      .map((team, i) => {
+        const scores = allScores[i];
+        const color = getChartColor(i, 8);
+        const { wavePath, fillPath } = buildWavePath(
+          scores,
+          globalMax,
+          color,
+          180,
+          64,
+        );
+        return {
+          name: team.name,
+          rank: team.rank,
+          points: team.points,
+          color,
+          scores,
+          wavePath,
+          fillPath,
+        };
+      });
+  }, [data]);
+
+  if (!waves.length) {
+    return (
+      <div className="ledger-note py-6 text-center">No wave data yet...</div>
+    );
+  }
+
+  const svgW = 180;
+  const svgH = 64;
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly"
+      style={{
+        borderColor: "color-mix(in srgb, var(--accent-cyan) 34%, var(--line))",
+        background:
+          "linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, var(--accent-cyan) 12%), color-mix(in srgb, var(--paper) 92%, var(--paper-2) 8%))",
+      }}
+    >
+      <div className="mb-3 flex items-center gap-2 border-b border-dashed border-(--border-wobbly)/40 pb-2">
+        <span className="text-lg" style={{ color: "var(--accent-cyan)" }}>
+          〰
+        </span>
+        <span className="font-bold text-lg text-(--ink)">
+          Points Color Wave
+        </span>
+        <span className="text-xs text-(--ink-faint) ml-auto">
+          season flow
+        </span>
+      </div>
+
+      <div className="grid gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {waves.map((w, i) => (
+          <motion.div
+            key={w.name}
+            initial={{ opacity: 0, x: -12 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: i * 0.05 }}
+            className="flex items-center gap-2.5 rounded-xl border-2 p-2.5"
+            style={{
+              borderColor: `color-mix(in srgb, ${w.color} 28%, var(--line))`,
+              background: `color-mix(in srgb, ${w.color} 6%, var(--paper) 94%)`,
+            }}
+          >
+            <div className="flex flex-col items-center min-w-10">
+              <span
+                className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-black"
+                style={{
+                  background: `color-mix(in srgb, ${w.color} 30%, var(--paper) 70%)`,
+                  color: "var(--ink)",
+                  border: `1px solid color-mix(in srgb, ${w.color} 50%, var(--line))`,
+                }}
+              >
+                #{w.rank}
+              </span>
+            </div>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-1 mb-1">
+                <span className="truncate text-[15px] font-bold text-(--ink)">
+                  {w.name}
+                </span>
+                <span className="text-[15px] font-black text-(--ink-soft)">
+                  {formatCompactNumber(w.points)}
+                </span>
+              </div>
+
+              <svg viewBox={`0 0 ${svgW} ${svgH}`} className="w-full h-auto">
+                <motion.path
+                  d={w.fillPath}
+                  fill={`color-mix(in srgb, ${w.color} 18%, transparent)`}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: i * 0.05 + 0.2 }}
+                />
+                <motion.path
+                  d={w.wavePath}
+                  fill="none"
+                  stroke={w.color}
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  initial={{ pathLength: 0 }}
+                  animate={{ pathLength: 1 }}
+                  transition={{ delay: i * 0.05 + 0.1, duration: 0.8 }}
+                />
+                {w.scores.map((s, si) => {
+                  const x = (si / Math.max(w.scores.length - 1, 1)) * svgW;
+                  const maxVal = Math.max(...w.scores, 1);
+                  const y = svgH - 10 - (s / maxVal) * (svgH - 30);
+                  return (
+                    <motion.circle
+                      key={si}
+                      cx={x}
+                      cy={y}
+                      r={2.5}
+                      fill={w.color}
+                      stroke="var(--paper)"
+                      strokeWidth={1}
+                      initial={{ scale: 0 }}
+                      animate={{ scale: 1 }}
+                      transition={{ delay: i * 0.05 + 0.3 + si * 0.02 }}
+                    />
+                  );
+                })}
+              </svg>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/app/components/CrownBattle.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { useMemo } from "react";
+import { FaCrown, FaShield, FaBolt, FaStar, FaArrowRight, FaArrowLeft } from "react-icons/fa6";
+import { motion } from "framer-motion";
+import type { DashboardData } from "../types";
+import { formatCompactNumber } from "../lib/utils";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+export default function CrownBattle({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const top = useMemo(() => {
+    if (!data?.overall?.length) return null;
+    const sorted = [...data.overall].sort((a, b) => a.rank - b.rank);
+    return {
+      leader: sorted[0],
+      runnerUp: sorted[1],
+      third: sorted[2],
+      gap: sorted[0].points - (sorted[1]?.points ?? 0),
+      gap2: (sorted[1]?.points ?? 0) - (sorted[2]?.points ?? 0),
+      leaderColor: getChartColor(0, 8),
+      runnerColor: getChartColor(1, 8),
+      thirdColor: getChartColor(2, 8),
+    };
+  }, [data]);
+
+  if (!top) {
+    return <div className="ledger-note py-6 text-center">No battle data yet...</div>;
+  }
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly overflow-hidden"
+      style={{
+        borderColor: "color-mix(in srgb, var(--accent-amber) 34%, var(--line))",
+        background:
+          "radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent-amber) 10%, var(--paper) 90%), var(--paper) 80%)",
+      }}
+    >
+      <div className="mb-3 flex items-center gap-2 border-b border-dashed border-(--border-wobbly)/40 pb-2">
+        <FaStar className="text-lg" style={{ color: "var(--accent-amber)" }} />
+        <span className="font-bold font-(--font-note) text-lg text-(--ink)">
+          Crown Battle
+        </span>
+        <span className="text-xs text-(--ink-faint) ml-auto">
+          battle for the throne
+        </span>
+      </div>
+
+      <div className="relative flex items-end justify-center gap-3 min-h-[200px]">
+        {/* Crown position indicator */}
+        <motion.div
+          className="absolute top-0 left-1/2 -translate-x-1/2 z-10"
+          animate={{ y: [0, -6, 0] }}
+          transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
+        >
+          <FaCrown
+            className="text-[45px]"
+            style={{
+              color: "var(--marker-yellow)",
+              filter: "drop-shadow(0 4px 12px rgba(234,179,8,0.5))",
+            }}
+          />
+        </motion.div>
+
+        {/* Runner Up */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 100 }}
+          className="flex-1 rounded-xl border-2 p-3 text-center mt-12"
+          style={{
+            borderColor: `color-mix(in srgb, ${top.runnerColor} 34%, var(--line))`,
+            background: `color-mix(in srgb, ${top.runnerColor} 8%, var(--paper) 92%)`,
+          }}
+        >
+          <motion.div
+            animate={{ y: [0, -3, 0] }}
+            transition={{ repeat: Infinity, duration: 3, ease: "easeInOut", delay: 0.5 }}
+          >
+            <FaShield className="mx-auto mb-2 text-xl" style={{ color: top.runnerColor }} />
+          </motion.div>
+          <span className="text-xs font-bold uppercase tracking-wider text-(--ink-faint)">
+            #2 · Challenger
+          </span>
+          <p className="text-[15px] font-bold text-(--ink) mt-1">
+            {top.runnerUp.name.length > 12
+              ? top.runnerUp.name.slice(0, 11) + "…"
+              : top.runnerUp.name}
+          </p>
+          <p className="text-base font-black mt-1" style={{ color: top.runnerColor }}>
+            {formatCompactNumber(top.runnerUp.points)}
+          </p>
+          <div
+            className="mt-1.5 inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10px] font-bold"
+            style={{
+              background: "color-mix(in srgb, var(--marker-pink) 18%, var(--panel) 82%)",
+              color: "var(--ink)",
+            }}
+          >
+            <FaArrowRight className="text-[9px]" />
+            <span>Δ {formatCompactNumber(top.gap)}</span>
+          </div>
+        </motion.div>
+
+        {/* Leader */}
+        <motion.div
+          initial={{ opacity: 0, y: 20, scale: 0.9 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ delay: 0.1, type: "spring", stiffness: 120 }}
+          className="flex-1 rounded-xl border-2 p-3 text-center mt-8 relative z-10"
+          style={{
+            borderColor: `color-mix(in srgb, ${top.leaderColor} 50%, var(--line))`,
+            background: `radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--marker-yellow) 16%, var(--paper) 84%), color-mix(in srgb, ${top.leaderColor} 8%, var(--paper) 92%))`,
+            boxShadow: `0 4px 24px color-mix(in srgb, var(--marker-yellow) 20%, transparent)`,
+          }}
+        >
+          {/* Sparkle effects */}
+          {[0, 1, 2].map((i) => (
+            <motion.div
+              key={i}
+              className="absolute pointer-events-none"
+              style={{
+                top: `${10 + i * 30}%`,
+                left: i % 2 === 0 ? "8%" : "auto",
+                right: i % 2 === 1 ? "8%" : "auto",
+              }}
+              animate={{
+                scale: [0, 1.2, 0],
+                opacity: [0, 0.8, 0],
+              }}
+              transition={{
+                repeat: Infinity,
+                duration: 1.5 + i * 0.3,
+                delay: i * 0.4,
+                ease: "easeInOut",
+              }}
+            >
+              <FaStar className="text-[6px]" style={{ color: "var(--marker-yellow)" }} />
+            </motion.div>
+          ))}
+
+          <motion.div
+            animate={{ rotate: [-5, 5, -5], scale: [1, 1.05, 1] }}
+            transition={{ repeat: Infinity, duration: 2.5, ease: "easeInOut", delay: 0.2 }}
+          >
+            <FaBolt className="mx-auto mb-2 text-xl" style={{ color: "var(--marker-yellow)" }} />
+          </motion.div>
+          <span className="text-xs font-bold uppercase tracking-wider text-(--marker-yellow)">
+            #1 · Champion
+          </span>
+          <p className="text-[15px] font-bold text-(--ink) mt-1">
+            {top.leader.name.length > 12
+              ? top.leader.name.slice(0, 11) + "…"
+              : top.leader.name}
+          </p>
+          <p className="text-lg font-black mt-1" style={{ color: "var(--marker-yellow)" }}>
+            {formatCompactNumber(top.leader.points)}
+          </p>
+        </motion.div>
+
+        {/* Third Place */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3, type: "spring", stiffness: 100 }}
+          className="flex-1 rounded-xl border-2 p-3 text-center mt-16"
+          style={{
+            borderColor: `color-mix(in srgb, ${top.thirdColor} 34%, var(--line))`,
+            background: `color-mix(in srgb, ${top.thirdColor} 8%, var(--paper) 92%)`,
+          }}
+        >
+          <motion.div
+            animate={{ y: [0, 3, 0] }}
+            transition={{ repeat: Infinity, duration: 3.5, ease: "easeInOut", delay: 1 }}
+          >
+            <FaShield className="mx-auto mb-2 text-xl" style={{ color: top.thirdColor }} />
+          </motion.div>
+          <span className="text-xs font-bold uppercase tracking-wider text-(--ink-faint)">
+            #3 · Contender
+          </span>
+          <p className="text-[15px] font-bold text-(--ink) mt-1">
+            {top.third.name.length > 12
+              ? top.third.name.slice(0, 11) + "…"
+              : top.third.name}
+          </p>
+          <p className="text-base font-black mt-1" style={{ color: top.thirdColor }}>
+            {formatCompactNumber(top.third.points)}
+          </p>
+          <div
+            className="mt-1.5 inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10px] font-bold"
+            style={{
+              background: "color-mix(in srgb, var(--marker-blue) 18%, var(--panel) 82%)",
+              color: "var(--ink)",
+            }}
+          >
+            <FaArrowLeft className="text-[9px]" />
+            <span>Δ {formatCompactNumber(top.gap2)}</span>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}