fixing some styling and component usage issues

app/(main)/stats/page.js

@@ -12,7 +12,6 @@ export default function StatsPage() {
   const [error, setError] = useState(null);
   const [teamStats, setTeamStats] = useState(null);
   const [expanded, setExpanded] = useState(false);
-  const [huntActive, setHuntActive] = useState(null);
   const router = useRouter();
 
   useEffect(() => {
@@ -24,34 +23,9 @@ export default function StatsPage() {
 
     if (status === "authenticated") {
       fetchTeamStats();
-      checkHuntStatus();
     }
   }, [status, router]);
 
-  // Check hunt status but don't redirect
-  const checkHuntStatus = async () => {
-    try {
-      const timestamp = Date.now();
-      const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "Cache-Control": "no-store, no-cache, must-revalidate",
-          Pragma: "no-cache",
-        },
-        credentials: "include",
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setHuntActive(data.active);
-        // We're just checking status, no redirect needed for stats page
-      }
-    } catch (err) {
-      console.error("Failed to check hunt status:", err);
-    }
-  };
-
   const fetchTeamStats = async () => {
     try {
       setLoading(true);
@@ -120,7 +94,6 @@ export default function StatsPage() {
           {foundClues?.length > 0 ? (
             foundClues.map((clue) => (
               <li key={clue.id} className="clue-item">
-                <div className="clue-icon found">✓</div>
                 <div className="clue-details">
                   <div className="clue-title">
                     {clue.title || `Clue #${clue.id}`}
@@ -142,8 +115,7 @@ export default function StatsPage() {
         <ul className="clue-list">
           {skippedClues?.length > 0 ? (
             skippedClues.map((clue) => (
-              <li key={clue.id} className="clue-item">
-                <div className="clue-icon skipped">↷</div>
+              <li key={clue.id} className="clue-item skipped-clue">
                 <div className="clue-details">
                   <div className="clue-title">
                     {clue.title || `Clue #${clue.id}`}
@@ -208,12 +180,6 @@ export default function StatsPage() {
         <h2 className={styles.teamName}>{teamStats.team.name}</h2>
       </div>
 
-      {!huntActive && teamStats && (
-        <div className="hunt-inactive-banner">
-          <p>The treasure hunt is not currently active. Team progress will be visible here once the hunt begins.</p>
-        </div>
-      )}
-
       <div className={styles.statsCard}>
         <div className={styles.summaryStats}>
           <div className={styles.statItem}>
@@ -266,22 +232,63 @@ export default function StatsPage() {
       <NavBar activeLink="stats" teamData={teamStats.team} />
 
       <style jsx>{`
-        .clue-icon.found {
-          background-color: #2e7d32;
-        }
-
-        .clue-icon.skipped {
-          background-color: #1976d2;
+        .clues-section {
+          padding: 10px 15px;
         }
         
-        .hunt-inactive-banner {
-          background-color: #fff3cd;
-          color: #856404;
+        .section-title {
+          font-size: 16px;
+          margin: 15px 0 10px 0;
+          color: #444;
+          font-weight: 600;
+        }
+        
+        .clue-list {
+          list-style: none;
+          padding: 0;
+          margin: 0 0 20px 0;
+        }
+        
+        .clue-item {
           padding: 12px 15px;
-          margin: 15px 20px 0;
+          border-bottom: 1px solid #eee;
+          background-color: #f9f9f9;
+          margin-bottom: 5px;
           border-radius: 4px;
+          border-left: 3px solid #4caf50;
+        }
+        
+        .skipped-clue {
+          border-left: 3px solid #2196f3;
+        }
+        
+        .clue-details {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .clue-title {
+          font-size: 14px;
+          color: #333;
+          flex: 1;
+        }
+        
+        .clue-time {
+          font-size: 12px;
+          color: #666;
+          text-align: right;
+          margin-left: 10px;
+          white-space: nowrap;
+        }
+        
+        .empty-state {
+          padding: 15px;
           text-align: center;
-          font-size: 0.9rem;
+          color: #888;
+          font-style: italic;
+          background-color: #f3f3f3;
+          border-radius: 4px;
         }
       `}</style>
     </div>