🎨 Redesign UI + 🐛 Fix media answer modal auto-close

client/src/components/TeamScores.jsx

@@ -1,19 +1,35 @@
 function TeamScores({ teams, myTeamId }) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
-      {teams.map((team) => (
-        <div
-          key={team.id}
-          className={`p-4 md:p-6 rounded-xl border shadow-lg transition-all duration-200 ${
-            team.id === myTeamId
-              ? 'bg-blue-900 border-blue-500'
-              : 'bg-slate-800 border-slate-700'
-          }`}
-        >
-          <h3 className="text-lg md:text-2xl font-bold text-white mb-1 md:mb-2">{team.name}</h3>
-          <p className="text-2xl md:text-4xl font-bold text-blue-400">{team.score} баллов</p>
-        </div>
-      ))}
+    <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 mb-4 md:mb-6">
+      {teams.map((team, index) => {
+        const isMe = team.id === myTeamId
+        const colors = [
+          'from-blue-600/30 to-blue-800/30 border-blue-400/30',
+          'from-purple-600/30 to-purple-800/30 border-purple-400/30',
+          'from-emerald-600/30 to-emerald-800/30 border-emerald-400/30',
+          'from-amber-600/30 to-amber-800/30 border-amber-400/30',
+          'from-rose-600/30 to-rose-800/30 border-rose-400/30',
+          'from-cyan-600/30 to-cyan-800/30 border-cyan-400/30',
+        ]
+        const colorClass = colors[index % colors.length]
+
+        return (
+          <div
+            key={team.id}
+            className={`p-3 md:p-5 rounded-xl border backdrop-blur-sm transition-all duration-300 ${
+              isMe
+                ? 'bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border-blue-400/50 glow-blue scale-[1.02]'
+                : `bg-gradient-to-br ${colorClass}`
+            }`}
+          >
+            <h3 className="text-sm md:text-lg font-bold text-white mb-0.5 md:mb-1 truncate">
+              {isMe && '⭐ '}{team.name}
+            </h3>
+            <p className="font-display text-xl md:text-3xl font-bold text-gradient-gold">{team.score}</p>
+            <p className="text-[10px] md:text-xs text-gray-400">баллов</p>
+          </div>
+        )
+      })}
     </div>
   )
 }