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

client/src/components/GameBoard.jsx

@@ -1,33 +1,20 @@
 function GameBoard({ questions, usedQuestions, onSelectQuestion, currentRound, isHost }) {
   const isQuestionUsed = (category, points, questionIndex) => {
-    // Ищем этот конкретный вопрос в использованных
-    // Сначала проверяем по questionIndex (новый метод)
     const foundByIndex = usedQuestions.find(
       q => q.category === category && q.points === points && q.questionIndex === questionIndex
     );
+    if (foundByIndex) return true;
 
-    if (foundByIndex) {
-      console.log(`✓ Question used (by index): cat="${category}", pts=${points}, idx=${questionIndex}`);
-      return true;
-    }
-
-    // Для обратной совместимости: если в usedQuestions нет questionIndex,
-    // проверяем, сколько вопросов с такими баллами уже использовано
     const usedCount = usedQuestions.filter(
       q => q.category === category && q.points === points
     ).length;
-
     if (usedCount === 0) return false;
 
-    // Получаем категорию и находим индекс вопроса среди вопросов с такими же баллами
     const categoryData = questions.find(cat => cat.name === category);
     const questionsWithSamePoints = categoryData?.questions
       .map((q, idx) => ({ ...q, originalIndex: idx }))
       .filter(q => q.points === points) || [];
-
     const positionAmongSamePoints = questionsWithSamePoints.findIndex(q => q.originalIndex === questionIndex);
-
-    // Если позиция вопроса меньше количества использованных, значит он уже использован
     return positionAmongSamePoints >= 0 && positionAmongSamePoints < usedCount;
   }
 
@@ -35,15 +22,12 @@ function GameBoard({ questions, usedQuestions, onSelectQuestion, currentRound, i
     return round === 2 ? basePoints * 2 : basePoints
   }
 
-  // Проверить сколько вопросов осталось в категории
   const hasAvailableQuestions = (category) => {
     return category.questions.some((q, idx) => !isQuestionUsed(category.name, q.points, idx))
   }
 
-  // Фильтруем категории - показываем только те, где есть доступные вопросы
   const availableCategories = questions.filter(hasAvailableQuestions)
 
-  // Лог для отладки
   console.log('📋 GameBoard render:', {
     totalCategories: questions.length,
     availableCategories: availableCategories.length,
@@ -51,35 +35,35 @@ function GameBoard({ questions, usedQuestions, onSelectQuestion, currentRound, i
   });
 
   return (
-    <div className="bg-slate-800 p-3 md:p-6 rounded-xl shadow-xl border border-slate-700">
+    <div className="glass-strong rounded-2xl p-3 md:p-5 shadow-2xl">
       {!isHost && (
-        <div className="mb-3 md:mb-4 bg-blue-900 p-3 md:p-4 rounded-lg text-center">
-          <p className="text-white text-sm md:text-lg font-medium">
-            Ведущий выбирает вопросы. Будьте готовы отвечать!
+        <div className="mb-3 md:mb-4 bg-gradient-to-r from-blue-600/20 to-purple-600/20 border border-blue-400/20 p-3 md:p-4 rounded-xl text-center">
+          <p className="text-white text-sm md:text-base font-medium">
+            🎯 Ведущий выбирает вопросы. Будьте готовы!
           </p>
         </div>
       )}
       {isHost && (
-        <div className="mb-3 md:mb-4 bg-blue-900 p-3 md:p-4 rounded-lg text-center">
-          <p className="text-white text-sm md:text-lg font-bold">
-            Выберите вопрос
+        <div className="mb-3 md:mb-4 bg-gradient-to-r from-purple-600/20 to-indigo-600/20 border border-purple-400/20 p-3 md:p-4 rounded-xl text-center">
+          <p className="text-white text-sm md:text-base font-bold">
+            👆 Выберите вопрос
           </p>
         </div>
       )}
 
       {availableCategories.length > 0 ? (
-        <div className="space-y-2">
+        <div className="space-y-2 md:space-y-3">
           {availableCategories.map((category, catIdx) => (
-            <div key={catIdx} className="flex flex-col md:flex-row gap-2">
-              {/* Название категории */}
-              <div className="bg-blue-900 p-2 md:p-4 rounded-lg flex items-center justify-center border border-blue-700 md:min-w-[200px]">
-                <h3 className="text-white font-bold text-sm md:text-lg text-center">
+            <div key={catIdx} className="flex flex-col md:flex-row gap-2 animate-slide-up" style={{ animationDelay: `${catIdx * 0.05}s` }}>
+              {/* Category name */}
+              <div className="bg-gradient-to-r from-indigo-600/30 to-purple-600/30 border border-indigo-400/20 p-2.5 md:p-4 rounded-xl flex items-center justify-center md:min-w-[200px] backdrop-blur-sm">
+                <h3 className="text-white font-bold text-xs md:text-base text-center leading-tight">
                   {category.name}
                 </h3>
               </div>
 
-              {/* Вопросы по номиналам */}
-              <div className="grid grid-cols-5 md:flex gap-1 md:gap-2 flex-1">
+              {/* Question buttons */}
+              <div className="grid grid-cols-5 md:flex gap-1.5 md:gap-2 flex-1">
                 {category.questions.map((question, questionIndex) => {
                   const displayPoints = getPointsForRound(question.points, currentRound)
                   const isUsed = isQuestionUsed(category.name, question.points, questionIndex)
@@ -89,12 +73,12 @@ function GameBoard({ questions, usedQuestions, onSelectQuestion, currentRound, i
                       key={questionIndex}
                       onClick={() => !isUsed && isHost && onSelectQuestion(category.name, question.points)}
                       disabled={isUsed || !isHost}
-                      className={`flex-1 p-3 md:p-6 rounded-lg font-bold text-base md:text-2xl transition-all duration-200 ${
+                      className={`flex-1 p-3 md:p-5 rounded-xl font-bold text-base md:text-xl transition-all duration-300 ${
                         isUsed
-                          ? 'bg-slate-700 text-gray-500 cursor-not-allowed border border-slate-600'
+                          ? 'bg-white/3 text-gray-600 cursor-not-allowed border border-white/5'
                           : isHost
-                          ? 'bg-blue-600 text-white hover:bg-blue-700 cursor-pointer shadow-lg border border-blue-500'
-                          : 'bg-blue-600 text-white cursor-default opacity-60 border border-blue-500'
+                          ? 'bg-gradient-to-br from-blue-600/60 to-indigo-700/60 text-white hover:from-blue-500/80 hover:to-indigo-600/80 cursor-pointer shadow-lg hover:shadow-blue-500/20 border border-blue-400/20 hover:border-blue-400/40 hover:scale-105 active:scale-95 backdrop-blur-sm'
+                          : 'bg-gradient-to-br from-blue-600/40 to-indigo-700/40 text-white/70 cursor-default border border-blue-400/10 backdrop-blur-sm'
                       }`}
                     >
                       {isUsed ? '—' : displayPoints}
@@ -106,9 +90,9 @@ function GameBoard({ questions, usedQuestions, onSelectQuestion, currentRound, i
           ))}
         </div>
       ) : (
-        <div className="text-center py-8 md:py-12 bg-slate-700 rounded-lg border border-slate-600">
+        <div className="text-center py-8 md:py-12 glass rounded-xl">
           <p className="text-white text-lg md:text-2xl font-bold px-4">
-            Все вопросы раунда {currentRound} использованы!
+            ✅ Все вопросы раунда {currentRound} использованы!
           </p>
         </div>
       )}

client/src/components/QuestionModal.jsx

@@ -8,226 +8,175 @@ function QuestionModal({ question, timer, onSubmitAnswer, answeringTeamName, isH
 
   if (!question) return null
 
-  // Обработчик окончания проигрывания медиа
   const handleMediaEnded = () => {
     console.log('🎬 Media playback ended');
     setMediaEnded(true);
-
-    // Отправляем событие на сервер, чтобы начался таймер
     if (socket && gameCode) {
       socket.emit('media-ended', { gameCode });
     }
   }
 
-  // Сбрасываем флаг при смене вопроса
   useEffect(() => {
     setMediaEnded(false);
   }, [question])
 
   const getMediaUrl = (path) => {
-    // Если определена переменная окружения, используем её
-    if (import.meta.env.VITE_SERVER_URL) {
-      return `${import.meta.env.VITE_SERVER_URL}${path}`
-    }
-
-    // В production используем текущий хост (Caddy проксирует на сервер)
-    if (import.meta.env.PROD) {
-      return `${window.location.protocol}//${window.location.host}${path}`
-    }
-
-    // В development используем localhost
+    if (import.meta.env.VITE_SERVER_URL) return `${import.meta.env.VITE_SERVER_URL}${path}`
+    if (import.meta.env.PROD) return `${window.location.protocol}//${window.location.host}${path}`
     return `http://localhost:3001${path}`
   }
 
+  const timerColor = timer !== null
+    ? timer <= 5 ? 'text-red-400' : timer <= 10 ? 'text-amber-400' : 'text-white'
+    : 'text-white'
+
+  const timerBg = timer !== null && timer <= 5 ? 'animate-pulse' : ''
+
   const renderQuestionContent = () => {
+    const wrapperClass = "bg-gradient-to-br from-indigo-900/40 to-purple-900/40 border border-indigo-400/20 p-4 md:p-8 rounded-xl mb-4 md:mb-6 backdrop-blur-sm"
+
     switch (question.type) {
       case 'image':
         return (
-          <div className="bg-blue-900 p-4 md:p-8 rounded-lg mb-4 md:mb-6">
-            <img
-              src={getMediaUrl(question.question)}
-              alt="Question"
-              className="max-w-full max-h-64 md:max-h-96 mx-auto rounded-lg mb-4"
-            />
+          <div className={wrapperClass}>
+            <img src={getMediaUrl(question.question)} alt="Question"
+              className="max-w-full max-h-64 md:max-h-96 mx-auto rounded-xl mb-4 shadow-lg" />
             {question.questionText && (
-              <p className="text-white text-base md:text-2xl text-center mt-4">
-                {question.questionText}
-              </p>
+              <p className="text-white text-base md:text-2xl text-center mt-4">{question.questionText}</p>
             )}
           </div>
         )
-
       case 'audio':
         return (
-          <div className="bg-blue-900 p-4 md:p-8 rounded-lg mb-4 md:mb-6">
-            <audio
-              ref={audioRef}
-              controls
-              autoPlay
-              src={getMediaUrl(question.question)}
-              className="w-full mb-4"
-              onEnded={handleMediaEnded}
-            >
+          <div className={wrapperClass}>
+            <div className="flex items-center justify-center mb-4">
+              <div className="text-5xl md:text-7xl animate-pulse-slow">🎵</div>
+            </div>
+            <audio ref={audioRef} controls autoPlay src={getMediaUrl(question.question)}
+              className="w-full mb-4" onEnded={handleMediaEnded}>
               Ваш браузер не поддерживает аудио элемент.
             </audio>
             {question.questionText && (
-              <p className="text-white text-base md:text-2xl text-center mt-4">
-                {question.questionText}
-              </p>
+              <p className="text-white text-base md:text-2xl text-center mt-4">{question.questionText}</p>
             )}
             {!mediaEnded && (
-              <p className="text-yellow-400 text-sm md:text-base text-center mt-2">
+              <p className="text-amber-300/80 text-sm md:text-base text-center mt-2">
                 ⏸️ Таймер начнется после прослушивания
               </p>
             )}
           </div>
         )
-
       case 'video':
         return (
-          <div className="bg-blue-900 p-4 md:p-8 rounded-lg mb-4 md:mb-6">
-            <video
-              ref={videoRef}
-              controls
-              autoPlay
-              src={getMediaUrl(question.question)}
-              className="max-w-full max-h-64 md:max-h-96 mx-auto rounded-lg mb-4"
-              onEnded={handleMediaEnded}
-            >
+          <div className={wrapperClass}>
+            <video ref={videoRef} controls autoPlay src={getMediaUrl(question.question)}
+              className="max-w-full max-h-64 md:max-h-96 mx-auto rounded-xl mb-4 shadow-lg" onEnded={handleMediaEnded}>
               Ваш браузер не поддерживает видео элемент.
             </video>
             {question.questionText && (
-              <p className="text-white text-base md:text-2xl text-center mt-4">
-                {question.questionText}
-              </p>
+              <p className="text-white text-base md:text-2xl text-center mt-4">{question.questionText}</p>
             )}
             {!mediaEnded && (
-              <p className="text-yellow-400 text-sm md:text-base text-center mt-2">
+              <p className="text-amber-300/80 text-sm md:text-base text-center mt-2">
                 ⏸️ Таймер начнется после просмотра
               </p>
             )}
           </div>
         )
-
       case 'text':
       default:
         return (
-          <div className="bg-blue-900 p-4 md:p-8 rounded-lg mb-4 md:mb-6">
-            <p className="text-white text-base md:text-2xl text-center leading-relaxed">
-              {question.question}
-            </p>
+          <div className={wrapperClass}>
+            <p className="text-white text-lg md:text-2xl text-center leading-relaxed">{question.question}</p>
           </div>
         )
     }
   }
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4">
-      <div className="bg-gray-800 p-4 md:p-8 lg:p-12 rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
+    <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-3 md:p-4 animate-scale-in">
+      <div className="glass-strong p-4 md:p-8 lg:p-10 rounded-2xl max-w-4xl w-full max-h-[95vh] overflow-y-auto shadow-2xl">
+        {/* Header */}
         <div className="text-center mb-4 md:mb-6">
-          <p className="text-game-gold text-base md:text-xl mb-2">{question.category}</p>
-          <p className="text-game-gold text-xl md:text-3xl font-bold mb-3 md:mb-4">{question.points} баллов</p>
+          <p className="text-indigo-300 text-sm md:text-lg mb-1 font-medium">{question.category}</p>
+          <p className="font-display text-gradient-gold text-2xl md:text-4xl font-bold mb-3 md:mb-4">{question.points} баллов</p>
           {timer !== null && (
-            <p className="text-3xl md:text-5xl font-bold text-white mb-4 md:mb-6">{timer}с</p>
+            <div className={`inline-flex items-center justify-center w-16 h-16 md:w-20 md:h-20 rounded-full glass border-2 ${timer <= 5 ? 'border-red-400/50' : timer <= 10 ? 'border-amber-400/30' : 'border-white/20'} ${timerBg}`}>
+              <p className={`font-display text-3xl md:text-4xl font-bold ${timerColor}`}>{timer}</p>
+            </div>
           )}
         </div>
 
         {renderQuestionContent()}
 
-        {/* Кнопка "Показать ответ" для ведущего */}
+        {/* Show answer button for host */}
         {isHost && (
           <div className="mb-4 md:mb-6">
             {!showAnswer ? (
-              <button
-                onClick={() => setShowAnswer(true)}
-                className="w-full bg-yellow-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-base md:text-xl hover:bg-yellow-700 transition"
-              >
-                Показать ответ
+              <button onClick={() => setShowAnswer(true)}
+                className="w-full bg-gradient-to-r from-amber-600/80 to-yellow-600/80 hover:from-amber-500 hover:to-yellow-500 text-white font-bold py-3 md:py-4 rounded-xl text-base md:text-lg transition-all duration-300 border border-amber-400/30 hover:scale-[1.01] active:scale-[0.99]">
+                👁️ Показать ответ
               </button>
             ) : (
-              <div className="bg-green-900 p-4 md:p-6 rounded-lg">
-                <p className="text-white text-lg md:text-2xl font-bold text-center">
-                  Правильный ответ:
-                </p>
-                <p className="text-game-gold text-xl md:text-3xl text-center mt-2 md:mt-3">
-                  {question.answer}
-                </p>
+              <div className="bg-gradient-to-r from-emerald-900/40 to-green-900/40 border border-emerald-400/30 p-4 md:p-6 rounded-xl animate-scale-in">
+                <p className="text-emerald-300 text-sm md:text-lg font-medium text-center">Правильный ответ:</p>
+                <p className="text-gradient-gold font-display text-xl md:text-3xl text-center mt-2 font-bold">{question.answer}</p>
               </div>
             )}
           </div>
         )}
 
-        {/* Кнопка "Ответить" для команд (до того как кто-то нажал buzz-in) */}
+        {/* Buzz-in button for teams */}
         {canBuzzIn && (
           <div className="mb-4 md:mb-6">
-            <button
-              onClick={onBuzzIn}
-              className="w-full bg-red-600 text-white font-bold py-4 md:py-6 px-8 md:px-12 rounded-lg text-lg md:text-2xl hover:bg-red-700 transition animate-pulse"
-            >
-              ОТВЕТИТЬ
+            <button onClick={onBuzzIn}
+              className="w-full bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 text-white font-black py-5 md:py-7 rounded-2xl text-xl md:text-3xl transition-all duration-200 shadow-lg shadow-red-500/30 hover:shadow-red-500/50 animate-pulse-slow hover:animate-none hover:scale-[1.03] active:scale-95 active:animate-buzz border border-red-400/30">
+              🔔 ОТВЕТИТЬ
             </button>
-            {timer && (
-              <p className="text-2xl md:text-3xl text-game-gold mt-3 md:mt-4 font-bold text-center">
-                {timer}с
-              </p>
-            )}
           </div>
         )}
 
-        {/* Для ведущего: показать кто отвечает + кнопки управления */}
+        {/* Host: who is answering + correct/incorrect buttons */}
         {isHost && answeringTeamName && (
-          <div className="mb-4 md:mb-6">
-            <div className="bg-blue-900 p-4 md:p-6 rounded-lg mb-3 md:mb-4">
-              <p className="text-white text-lg md:text-2xl font-bold text-center">
-                Отвечает команда:
-              </p>
-              <p className="text-game-gold text-xl md:text-3xl text-center mt-2">
-                {answeringTeamName}
-              </p>
+          <div className="mb-4 md:mb-6 animate-scale-in">
+            <div className="bg-gradient-to-r from-blue-600/20 to-indigo-600/20 border border-blue-400/30 p-4 md:p-5 rounded-xl mb-3 md:mb-4 text-center">
+              <p className="text-gray-300 text-sm md:text-lg">Отвечает команда:</p>
+              <p className="text-white font-display text-xl md:text-2xl font-bold mt-1">{answeringTeamName}</p>
             </div>
-            <div className="flex gap-2 md:gap-4 justify-center">
-              <button
-                onClick={() => onSubmitAnswer(true)}
-                className="flex-1 md:flex-none bg-green-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-base md:text-xl hover:bg-green-700 transition"
-              >
-                Верно
+            <div className="flex gap-3 md:gap-4 justify-center">
+              <button onClick={() => onSubmitAnswer(true)}
+                className="flex-1 md:flex-none bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-500 hover:to-green-500 text-white font-bold py-3 md:py-4 px-6 md:px-10 rounded-xl text-base md:text-xl transition-all duration-300 hover:scale-[1.03] active:scale-95 border border-emerald-400/30">
+                ✅ Верно
               </button>
-              <button
-                onClick={() => onSubmitAnswer(false)}
-                className="flex-1 md:flex-none bg-red-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-base md:text-xl hover:bg-red-700 transition"
-              >
-                Неверно
+              <button onClick={() => onSubmitAnswer(false)}
+                className="flex-1 md:flex-none bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 text-white font-bold py-3 md:py-4 px-6 md:px-10 rounded-xl text-base md:text-xl transition-all duration-300 hover:scale-[1.03] active:scale-95 border border-red-400/30">
+                ❌ Неверно
               </button>
             </div>
           </div>
         )}
 
-        {/* Для ведущего: кнопка завершить досрочно (если никто не отвечает) */}
+        {/* Host: close question early */}
         {isHost && !answeringTeamName && (
           <div className="mb-4 md:mb-6">
-            <button
-              onClick={onCloseQuestion}
-              className="w-full bg-orange-600 text-white font-bold py-2 md:py-3 px-4 md:px-6 rounded-lg text-sm md:text-lg hover:bg-orange-700 transition"
-            >
-              Завершить вопрос досрочно
+            <button onClick={onCloseQuestion}
+              className="w-full glass hover:bg-white/10 text-gray-300 hover:text-white font-bold py-2.5 md:py-3 rounded-xl text-sm md:text-base transition-all duration-300">
+              ⏭️ Завершить вопрос досрочно
             </button>
           </div>
         )}
 
-        {/* Сообщение для команд */}
+        {/* Team view: who is answering */}
         {!isHost && answeringTeamName && (
-          <div className="mb-4 md:mb-6">
-            <p className="text-center text-white text-base md:text-xl">
-              Отвечает команда: <span className="text-game-gold font-bold">{answeringTeamName}</span>
+          <div className="mb-4 md:mb-6 text-center">
+            <p className="text-gray-300 text-base md:text-lg">
+              Отвечает: <span className="text-blue-300 font-bold">{answeringTeamName}</span>
             </p>
           </div>
         )}
 
-        {/* Сообщение ожидания для команд */}
         {!isHost && !canBuzzIn && !answeringTeamName && (
-          <p className="text-center text-gray-400 text-sm md:text-lg">
-            Ожидание...
-          </p>
+          <p className="text-center text-gray-500 text-sm md:text-base">Ожидание...</p>
         )}
       </div>
     </div>

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 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-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'
+            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-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>
+            <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>
   )
 }

client/src/index.css

@@ -1,19 +1,95 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #0A1E3D;
-  color: white;
+* {
+  box-sizing: border-box;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+body {
+  margin: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #0a0a1a;
+  color: white;
+  overflow-x: hidden;
+}
+
+.font-display {
+  font-family: 'Orbitron', sans-serif;
+}
+
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-strong {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-gold {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.glow-blue {
+  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3), 0 0 30px rgba(96, 165, 250, 0.1);
+}
+
+.glow-purple {
+  box-shadow: 0 0 15px rgba(167, 139, 250, 0.3), 0 0 30px rgba(167, 139, 250, 0.1);
+}
+
+.glow-gold {
+  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4), 0 0 30px rgba(251, 191, 36, 0.15);
+}
+
+.btn-glow {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.btn-glow::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.btn-glow:hover::before {
+  opacity: 1;
+}
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
+::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.3); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(96, 165, 250, 0.5); }
+
+.bg-pattern {
+  background-image: radial-gradient(circle at 25% 25%, rgba(96, 165, 250, 0.05) 0%, transparent 50%),
+                     radial-gradient(circle at 75% 75%, rgba(167, 139, 250, 0.05) 0%, transparent 50%);
 }

client/src/pages/CreateGame.jsx

@@ -8,14 +8,10 @@ function CreateGame() {
   const navigate = useNavigate()
 
   useEffect(() => {
-    // Слушаем событие создания игры
     socket.on('game-created', ({ gameCode }) => {
       setGameCode(gameCode)
     })
-
-    return () => {
-      socket.off('game-created')
-    }
+    return () => { socket.off('game-created') }
   }, [])
 
   const handleCreate = (e) => {
@@ -29,90 +25,70 @@ function CreateGame() {
   }
 
   const startGame = () => {
-    // Сохраняем в localStorage для восстановления после перезагрузки
-    localStorage.setItem('gameSession', JSON.stringify({
-      gameCode,
-      isHost: true,
-      hostName
-    }))
-
+    localStorage.setItem('gameSession', JSON.stringify({ gameCode, isHost: true, hostName }))
     navigate(`/game/${gameCode}`, { state: { isHost: true, hostName } })
   }
 
   if (gameCode) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
-        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8">
+      <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 bg-pattern">
+        <div className="absolute top-1/3 right-1/4 w-64 h-64 bg-green-500/8 rounded-full blur-3xl animate-blob" />
+
+        <div className="animate-scale-in relative z-10 w-full max-w-md">
+          <h1 className="font-display text-2xl sm:text-3xl md:text-4xl font-bold text-gradient text-center mb-6 md:mb-8">
             Игра создана!
           </h1>
 
-        <div className="bg-slate-800 p-6 md:p-8 rounded-xl w-full max-w-md text-center border border-slate-700 shadow-xl">
-          <p className="text-gray-300 text-base md:text-lg mb-4">
-            Код для команд:
-          </p>
-          <div className="bg-slate-900 p-4 md:p-6 rounded-lg mb-6 border border-blue-500">
-            <p className="text-blue-400 text-3xl sm:text-4xl md:text-5xl font-bold tracking-wider">
+          <div className="glass-strong p-6 md:p-8 rounded-2xl w-full text-center shadow-xl">
+            <p className="text-gray-300 text-base md:text-lg mb-4">Код для команд:</p>
+            <div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 p-4 md:p-6 rounded-xl mb-6 border border-blue-400/30 glow-blue">
+              <p className="font-display text-blue-300 text-3xl sm:text-4xl md:text-5xl font-bold tracking-[0.3em]">
                 {gameCode}
               </p>
             </div>
 
-          <button
-            onClick={copyGameCode}
-            className="w-full bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg transition-all duration-200 mb-3 shadow-lg"
-          >
+            <button onClick={copyGameCode}
+              className="w-full glass hover:bg-white/10 text-white font-bold py-3 rounded-xl transition-all duration-300 mb-3 hover:scale-[1.02] active:scale-[0.98]">
               📋 Скопировать код
             </button>
-
-          <button
-            onClick={startGame}
-            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg"
-          >
-            Перейти к игре
+            <button onClick={startGame}
+              className="w-full btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]">
+              Перейти к игре →
             </button>
-
-          <p className="text-gray-400 text-xs md:text-sm mt-4">
-            Отправьте этот код командам для присоединения
-          </p>
+            <p className="text-gray-500 text-xs md:text-sm mt-4">Отправьте этот код командам для присоединения</p>
+          </div>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
-      <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8">
-        Создать новую игру
+    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 bg-pattern">
+      <div className="absolute bottom-1/4 left-1/3 w-56 h-56 bg-blue-500/8 rounded-full blur-3xl animate-blob" />
+
+      <div className="animate-slide-up relative z-10 w-full max-w-md">
+        <h1 className="font-display text-2xl sm:text-3xl md:text-4xl font-bold text-gradient text-center mb-6 md:mb-8">
+          Создать игру
         </h1>
 
-      <form onSubmit={handleCreate} className="bg-slate-800 p-6 md:p-8 rounded-xl w-full max-w-md border border-slate-700 shadow-xl">
+        <form onSubmit={handleCreate} className="glass-strong p-6 md:p-8 rounded-2xl w-full shadow-xl">
           <div className="mb-6">
             <label className="block text-gray-300 mb-2 font-medium text-sm md:text-base">Имя ведущего</label>
-          <input
-            type="text"
-            value={hostName}
-            onChange={(e) => setHostName(e.target.value)}
-            className="w-full p-3 rounded-lg bg-slate-900 text-white border border-slate-600 focus:outline-none focus:border-blue-500 transition-colors"
-            placeholder="Введите ваше имя"
-            required
-          />
+            <input type="text" value={hostName} onChange={(e) => setHostName(e.target.value)}
+              className="w-full p-3.5 rounded-xl bg-white/5 text-white border border-white/10 focus:outline-none focus:border-blue-400/50 focus:bg-white/8 transition-all duration-300 placeholder-gray-500"
+              placeholder="Введите ваше имя" required />
           </div>
-
-        <button
-          type="submit"
-          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
-        >
+          <button type="submit"
+            className="w-full btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3.5 rounded-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]">
             Создать
           </button>
-
-        <button
-          type="button"
-          onClick={() => navigate('/')}
-          className="w-full mt-3 bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg"
-        >
-          Назад
+          <button type="button" onClick={() => navigate('/')}
+            className="w-full mt-3 glass hover:bg-white/10 text-white font-bold py-3.5 rounded-xl transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
+            ← Назад
           </button>
         </form>
       </div>
+    </div>
   )
 }
 

client/src/pages/Game.jsx

@@ -10,22 +10,13 @@ function Game() {
   const location = useLocation()
   const navigate = useNavigate()
 
-  // Попытка восстановить сессию из localStorage при перезагрузке
   const getSessionData = () => {
-    if (location.state) {
-      return location.state
-    }
-
-    // Если state пустой, попробуем восстановить из localStorage
+    if (location.state) return location.state
     const savedSession = localStorage.getItem('gameSession')
     if (savedSession) {
       const session = JSON.parse(savedSession)
-      // Проверяем что это та же игра
-      if (session.gameCode === gameCode) {
-        return session
+      if (session.gameCode === gameCode) return session
     }
-    }
-
     return {}
   }
 
@@ -39,7 +30,6 @@ function Game() {
   const [answerMedia, setAnswerMedia] = useState(null)
   const [shouldFinishAfterMedia, setShouldFinishAfterMedia] = useState(false)
 
-  // Если нет teamName и не хост, редиректим на главную
   useEffect(() => {
     if (!teamName && !isHost) {
       console.warn('No team name or host status, redirecting to home')
@@ -47,77 +37,54 @@ function Game() {
     }
   }, [teamName, isHost, navigate])
 
-  // Подключаемся к игре (хост или команда)
   useEffect(() => {
     if (isHost) {
       socket.emit('host-join-game', { gameCode })
     } else if (teamName) {
-      // Команда переподключается к игре
       socket.emit('join-game', { gameCode, teamName })
     }
   }, [isHost, teamName, gameCode])
 
   useEffect(() => {
-    // Socket обработчики
     socket.on('game-updated', (updatedGame) => {
       setGame(updatedGame)
-
       if (!isHost && teamName) {
         const team = updatedGame.teams.find(t => t.name === teamName)
         setMyTeam(team)
       }
-
-      // Обновляем selectedCategories когда игра обновляется
-      if (updatedGame.selectedCategories) {
-        setQuestions(updatedGame.selectedCategories)
-      }
+      if (updatedGame.selectedCategories) setQuestions(updatedGame.selectedCategories)
     })
 
     socket.on('game-started', (game) => {
       setGame(game)
-
       if (!isHost && teamName) {
         const team = game.teams.find(t => t.name === teamName)
         setMyTeam(team)
       }
-
-      if (game.selectedCategories) {
-        setQuestions(game.selectedCategories)
-      }
+      if (game.selectedCategories) setQuestions(game.selectedCategories)
     })
 
     socket.on('host-game-loaded', (loadedGame) => {
       setGame(loadedGame)
-      if (loadedGame.selectedCategories) {
-        setQuestions(loadedGame.selectedCategories)
-      }
+      if (loadedGame.selectedCategories) setQuestions(loadedGame.selectedCategories)
     })
 
     socket.on('question-selected', ({ category, points, questionIndex, timer }) => {
-      // Ищем вопрос в selectedCategories игры по индексу
       const categoryData = game?.selectedCategories?.find(cat => cat.name === category)
-
-      // Если есть questionIndex, используем его, иначе ищем по баллам (для обратной совместимости)
       const questionData = questionIndex !== undefined
         ? categoryData?.questions[questionIndex]
         : categoryData?.questions.find(q => q.points === points)
-
       console.log(`📥 Question selected: category="${category}", points=${points}, questionIndex=${questionIndex}`, questionData);
-
       setCurrentQuestion({ ...questionData, category, points })
       setTimer(timer)
     })
 
-    socket.on('timer-update', ({ timer }) => {
-      setTimer(timer)
-    })
+    socket.on('timer-update', ({ timer }) => { setTimer(timer) })
 
     socket.on('time-up', ({ answerMedia, shouldFinish }) => {
       if (answerMedia) {
         setAnswerMedia(answerMedia)
-        if (shouldFinish) {
-          setShouldFinishAfterMedia(true)
-        }
+        if (shouldFinish) setShouldFinishAfterMedia(true)
       }
       setCurrentQuestion(null)
       setTimer(null)
@@ -130,35 +97,27 @@ function Game() {
     socket.on('answer-result', ({ teamId, isCorrect, questionClosed, answerMedia, shouldFinish }) => {
       console.log('Answer result:', { teamId, isCorrect, questionClosed, answerMedia, shouldFinish })
       if (questionClosed) {
-        // Правильный ответ - закрываем вопрос
         if (answerMedia) {
           setAnswerMedia(answerMedia)
-          if (shouldFinish) {
-            setShouldFinishAfterMedia(true)
-          }
+          if (shouldFinish) setShouldFinishAfterMedia(true)
         }
         setTimeout(() => {
           setCurrentQuestion(null)
           setTimer(null)
         }, 2000)
       } else {
-        // Неправильный ответ - продолжаем игру
         console.log('Incorrect answer, waiting for other teams')
       }
     })
 
     socket.on('round-changed', ({ round }) => {
       console.log(`Round ${round} started`)
-      // Принудительно обновляем состояние игры после смены раунда
-      // Сервер отправит game-updated сразу после, но мы сбрасываем локальное состояние
       setCurrentQuestion(null)
       setTimer(null)
       setAnswerMedia(null)
     })
 
-    socket.on('game-finished', (finishedGame) => {
-      setGame(finishedGame)
-    })
+    socket.on('game-finished', (finishedGame) => { setGame(finishedGame) })
 
     return () => {
       socket.off('game-updated')
@@ -174,25 +133,14 @@ function Game() {
     }
   }, [teamName, questions, isHost])
 
-  const handleStartGame = () => {
-    socket.emit('start-game', { gameCode })
-  }
-
+  const handleStartGame = () => { socket.emit('start-game', { gameCode }) }
   const handleSelectQuestion = (category, points) => {
-    // Только хост может выбирать вопросы
-    if (isHost) {
-      socket.emit('select-question', { gameCode, category, points })
+    if (isHost) socket.emit('select-question', { gameCode, category, points })
   }
-  }
-
   const handleBuzzIn = () => {
-    if (myTeam) {
-      socket.emit('buzz-in', { gameCode, teamId: myTeam.id })
+    if (myTeam) socket.emit('buzz-in', { gameCode, teamId: myTeam.id })
   }
-  }
-
   const handleSubmitAnswer = (isCorrect) => {
-    // Теперь только ведущий отправляет ответ
     console.log('handleSubmitAnswer called', { isHost, answeringTeam: game.answeringTeam, isCorrect })
     if (isHost && game.answeringTeam) {
       console.log('Sending submit-answer', { gameCode, teamId: game.answeringTeam, isCorrect })
@@ -201,21 +149,12 @@ function Game() {
       console.log('Not sending: isHost=', isHost, 'answeringTeam=', game.answeringTeam)
     }
   }
-
   const handleCloseQuestion = () => {
-    // Ведущий может досрочно закрыть вопрос
-    if (isHost) {
-      socket.emit('close-question', { gameCode })
+    if (isHost) socket.emit('close-question', { gameCode })
   }
-  }
-
   const handleFinishGame = () => {
-    // Ведущий завершает игру
-    if (isHost) {
-      socket.emit('finish-game', { gameCode })
+    if (isHost) socket.emit('finish-game', { gameCode })
   }
-  }
-
   const handleCloseAnswerMedia = () => {
     setAnswerMedia(null)
     if (shouldFinishAfterMedia && isHost) {
@@ -226,63 +165,60 @@ function Game() {
 
   if (!game) {
     return (
-      <div className="flex items-center justify-center min-h-screen px-4">
-        <div className="text-center">
-          <h2 className="text-2xl md:text-3xl font-bold text-game-gold mb-4">Загрузка...</h2>
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4">
+        <div className="text-center animate-pulse-slow">
+          <div className="text-6xl mb-4">🧠</div>
+          <h2 className="font-display text-2xl md:text-3xl font-bold text-gradient mb-4">Загрузка...</h2>
         </div>
       </div>
     )
   }
 
-  // Экран результатов
+  // Results screen
   if (game.status === 'finished') {
     const sortedTeams = [...game.teams].sort((a, b) => b.score - a.score)
     const winner = sortedTeams[0]
+    const medals = ['🥇', '🥈', '🥉']
 
     return (
-      <div className="min-h-screen p-4 md:p-8">
+      <div className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] bg-pattern">
         <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-8 md:mb-12">
-            <h1 className="text-3xl md:text-6xl font-bold text-game-gold mb-4">ИГРА ЗАВЕРШЕНА!</h1>
-            <div className="bg-gradient-to-r from-yellow-400 to-yellow-600 p-6 md:p-8 rounded-lg mb-6 md:mb-8">
-              <p className="text-2xl md:text-4xl font-bold text-gray-900 mb-2">🏆 ПОБЕДИТЕЛЬ 🏆</p>
-              <p className="text-3xl md:text-5xl font-bold text-gray-900">{winner.name}</p>
-              <p className="text-xl md:text-3xl font-bold text-gray-900 mt-2">{winner.score} баллов</p>
+          <div className="text-center mb-8 md:mb-12 animate-slide-up">
+            <h1 className="font-display text-3xl md:text-6xl font-black text-gradient-gold mb-6">ИГРА ЗАВЕРШЕНА!</h1>
+            <div className="glass-strong p-6 md:p-10 rounded-2xl mb-6 md:mb-8 glow-gold">
+              <p className="text-2xl md:text-4xl font-bold text-white mb-3">🏆 ПОБЕДИТЕЛЬ 🏆</p>
+              <p className="font-display text-3xl md:text-5xl font-black text-gradient-gold">{winner.name}</p>
+              <p className="font-display text-xl md:text-3xl font-bold text-amber-300 mt-3">{winner.score} баллов</p>
             </div>
           </div>
 
-          <div className="bg-gray-800 p-4 md:p-8 rounded-lg mb-6 md:mb-8">
-            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 md:mb-6 text-center">Итоговая таблица</h2>
-            <div className="space-y-3 md:space-y-4">
+          <div className="glass-strong p-4 md:p-8 rounded-2xl mb-6 md:mb-8">
+            <h2 className="font-display text-xl md:text-2xl font-bold text-white mb-4 md:mb-6 text-center">Итоговая таблица</h2>
+            <div className="space-y-2 md:space-y-3">
               {sortedTeams.map((team, index) => (
-                <div
-                  key={team.id}
-                  className={`flex justify-between items-center p-4 md:p-6 rounded-lg ${
-                    index === 0
-                      ? 'bg-gradient-to-r from-yellow-600 to-yellow-700'
-                      : index === 1
-                      ? 'bg-gradient-to-r from-gray-400 to-gray-500'
-                      : index === 2
-                      ? 'bg-gradient-to-r from-orange-600 to-orange-700'
-                      : 'bg-gray-700'
+                <div key={team.id}
+                  className={`flex justify-between items-center p-4 md:p-5 rounded-xl transition-all duration-300 animate-slide-up border ${
+                    index === 0 ? 'bg-gradient-to-r from-amber-600/30 to-yellow-600/30 border-amber-400/30 glow-gold'
+                    : index === 1 ? 'bg-gradient-to-r from-gray-400/20 to-gray-500/20 border-gray-400/20'
+                    : index === 2 ? 'bg-gradient-to-r from-orange-600/20 to-orange-700/20 border-orange-400/20'
+                    : 'glass'
                   }`}
+                  style={{ animationDelay: `${index * 0.1}s` }}
                 >
                   <div className="flex items-center gap-2 md:gap-4">
-                    <span className="text-2xl md:text-4xl font-bold text-white">#{index + 1}</span>
-                    <span className="text-base md:text-2xl font-bold text-white">{team.name}</span>
+                    <span className="text-2xl md:text-4xl">{medals[index] || `#${index + 1}`}</span>
+                    <span className="text-base md:text-xl font-bold text-white">{team.name}</span>
                   </div>
-                  <span className="text-xl md:text-3xl font-bold text-white">{team.score}</span>
+                  <span className="font-display text-xl md:text-2xl font-bold text-gradient-gold">{team.score}</span>
                 </div>
               ))}
             </div>
           </div>
 
           <div className="text-center">
-            <button
-              onClick={() => navigate('/')}
-              className="bg-game-gold text-game-blue font-bold py-3 md:py-4 px-8 md:px-12 rounded-lg text-base md:text-xl hover:bg-yellow-500 transition"
-            >
-              Вернуться на главную
+            <button onClick={() => navigate('/')}
+              className="btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3 md:py-4 px-8 md:px-12 rounded-2xl text-base md:text-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]">
+              🏠 На главную
             </button>
           </div>
         </div>
@@ -291,64 +227,57 @@ function Game() {
   }
 
   return (
-    <div className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900">
+    <div className="min-h-screen p-3 md:p-6 bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] bg-pattern">
       <div className="max-w-7xl mx-auto">
-        {/* Заголовок */}
-        <div className="text-center mb-6 md:mb-8">
-          <h1 className="text-3xl md:text-5xl font-bold text-blue-400 mb-3 md:mb-4">
-            СВОЯ ИГРА
-          </h1>
-          <div className="bg-slate-800 rounded-xl p-3 md:p-4 inline-block border border-slate-700">
-            <p className="text-sm md:text-xl text-gray-300">
-              Код игры: <span className="text-blue-400 font-bold tracking-wider">{gameCode}</span>
-            </p>
+        {/* Header */}
+        <div className="text-center mb-4 md:mb-6">
+          <h1 className="font-display text-2xl md:text-4xl font-black text-gradient mb-2 md:mb-3">СВОЯ ИГРА</h1>
+          <div className="glass inline-flex items-center gap-3 md:gap-5 px-4 md:px-6 py-2 md:py-3 rounded-xl">
+            <span className="text-xs md:text-base text-gray-400">
+              Код: <span className="font-display text-blue-300 font-bold tracking-wider">{gameCode}</span>
+            </span>
             {isHost && (
-              <p className="text-xs md:text-md text-gray-400 mt-2">
-                Ведущий: {hostName}
-              </p>
+              <span className="text-xs md:text-sm text-gray-500">• {hostName}</span>
             )}
-            <div className="mt-2 md:mt-3 inline-block bg-blue-600 text-white px-4 md:px-6 py-1 md:py-2 rounded-lg font-bold shadow-lg text-sm md:text-base">
+            <span className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-3 md:px-4 py-0.5 md:py-1 rounded-lg font-bold text-xs md:text-sm font-display">
               Раунд {game.currentRound}
-            </div>
+            </span>
           </div>
         </div>
 
-        {/* Счет команд */}
+        {/* Team scores */}
         <TeamScores teams={game.teams} myTeamId={myTeam?.id} />
 
-        {/* Статус игры */}
+        {/* Waiting state */}
         {game.status === 'waiting' && isHost && (
-          <div className="text-center my-6 md:my-8">
+          <div className="text-center my-6 md:my-8 animate-slide-up">
+            <div className="glass-strong p-6 md:p-8 rounded-2xl inline-block">
               <p className="text-white text-base md:text-lg mb-4">
-              Ожидание команд... ({game.teams.length} команд(ы) присоединилось)
+                Ожидание команд... <span className="text-blue-300 font-bold">({game.teams.length})</span>
               </p>
               {game.teams.length > 0 && (
-              <button
-                onClick={handleStartGame}
-                className="bg-green-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-lg md:text-xl hover:bg-green-700 transition"
-              >
-                Начать игру
+                <button onClick={handleStartGame}
+                  className="btn-glow bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-500 hover:to-green-500 text-white font-bold py-3 md:py-4 px-8 md:px-10 rounded-xl text-lg md:text-xl transition-all duration-300 shadow-lg shadow-emerald-500/20 hover:scale-[1.03] active:scale-95 border border-emerald-400/30">
+                  ▶️ Начать игру
                 </button>
               )}
               {game.teams.length === 0 && (
-              <p className="text-gray-400 text-sm md:text-base">
-                Отправьте код игры командам для присоединения
-              </p>
+                <p className="text-gray-500 text-sm md:text-base mt-2">Отправьте код игры командам</p>
               )}
             </div>
+          </div>
         )}
 
         {game.status === 'waiting' && !isHost && (
           <div className="text-center my-6 md:my-8">
-            <p className="text-white text-base md:text-lg">
-              Ожидание начала игры ведущим...
-            </p>
+            <div className="glass p-6 rounded-2xl inline-block animate-pulse-slow">
+              <p className="text-white text-base md:text-lg">⏳ Ожидание начала игры...</p>
+            </div>
           </div>
         )}
 
-        {/* Игровое поле */}
+        {/* Game board */}
         {game.status === 'playing' && (
-          <>
           <GameBoard
             questions={questions}
             usedQuestions={game.usedQuestions}
@@ -356,10 +285,9 @@ function Game() {
             currentRound={game.currentRound}
             isHost={isHost}
           />
-          </>
         )}
 
-        {/* Модальное окно с вопросом */}
+        {/* Question modal */}
         {currentQuestion && (
           <QuestionModal
             question={currentQuestion}
@@ -375,30 +303,23 @@ function Game() {
           />
         )}
 
-        {/* Модальное окно с ответом (песня) - показываем всем */}
+        {/* Answer media modal */}
         {answerMedia && (
-          <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4">
-            <div className="bg-gradient-to-br from-blue-900 to-slate-900 p-6 md:p-12 rounded-2xl max-w-4xl w-full border-4 border-blue-400 shadow-2xl">
-              <h2 className="text-2xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8 text-center">
+          <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-scale-in">
+            <div className="glass-strong p-6 md:p-10 rounded-2xl max-w-4xl w-full shadow-2xl glow-blue">
+              <h2 className="font-display text-2xl md:text-4xl font-bold text-gradient text-center mb-6 md:mb-8">
                 Правильный ответ
               </h2>
-
-              <div className="bg-slate-800 p-6 md:p-8 rounded-lg mb-6 md:mb-8">
-                <audio
-                  controls
-                  autoPlay
+              <div className="glass p-4 md:p-6 rounded-xl mb-6 md:mb-8">
+                <audio controls autoPlay
                   src={`${window.location.protocol}//${window.location.host}${answerMedia}`}
-                  className="w-full"
-                >
+                  className="w-full" onEnded={handleCloseAnswerMedia}>
                   Ваш браузер не поддерживает аудио элемент.
                 </audio>
               </div>
-
               <div className="text-center">
-                <button
-                  onClick={handleCloseAnswerMedia}
-                  className="bg-blue-600 text-white font-bold py-3 md:py-4 px-8 md:px-12 rounded-lg text-lg md:text-xl hover:bg-blue-700 transition shadow-lg"
-                >
+                <button onClick={handleCloseAnswerMedia}
+                  className="btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3 md:py-4 px-8 md:px-12 rounded-xl text-lg md:text-xl transition-all duration-300 shadow-lg hover:scale-[1.02] active:scale-[0.98]">
                   Закрыть
                 </button>
               </div>
@@ -406,26 +327,22 @@ function Game() {
           </div>
         )}
 
-        {/* Кнопка следующего раунда */}
+        {/* Next round button */}
         {isHost && game.usedQuestions.length >= 25 && game.status === 'playing' && (
-          <div className="text-center mt-6 md:mt-8">
-            <button
-              onClick={() => socket.emit('next-round', { gameCode })}
-              className="bg-blue-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-lg md:text-xl hover:bg-blue-700 transition"
-            >
-              Следующий раунд
+          <div className="text-center mt-4 md:mt-6">
+            <button onClick={() => socket.emit('next-round', { gameCode })}
+              className="btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-xl text-base md:text-lg transition-all duration-300 shadow-lg hover:scale-[1.02] active:scale-[0.98]">
+              ⏭️ Следующий раунд
             </button>
           </div>
         )}
 
-        {/* Кнопка завершить игру для ведущего */}
+        {/* Finish game button */}
         {isHost && game.status === 'playing' && (
-          <div className="text-center mt-6 md:mt-8">
-            <button
-              onClick={handleFinishGame}
-              className="bg-red-600 text-white font-bold py-2 md:py-3 px-6 md:px-8 rounded-lg text-base md:text-lg hover:bg-red-700 transition"
-            >
-              Завершить игру
+          <div className="text-center mt-4 md:mt-6">
+            <button onClick={handleFinishGame}
+              className="glass hover:bg-red-500/20 text-red-300 hover:text-red-200 font-bold py-2 md:py-3 px-6 md:px-8 rounded-xl text-sm md:text-base transition-all duration-300 border-red-500/20 hover:border-red-400/30">
+              🏁 Завершить игру
             </button>
           </div>
         )}

client/src/pages/Home.jsx

@@ -4,28 +4,40 @@ function Home() {
   const navigate = useNavigate()
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
-      <div className="text-center w-full max-w-md">
-        <div className="mb-8 md:mb-16">
-          <h1 className="text-4xl sm:text-5xl md:text-7xl font-bold text-blue-400 mb-2 md:mb-4">
+    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 overflow-hidden bg-pattern">
+      {/* Ambient blobs */}
+      <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl animate-blob" />
+      <div className="absolute bottom-1/4 right-1/4 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl animate-blob" style={{ animationDelay: '2s' }} />
+      <div className="absolute top-1/2 left-1/2 w-56 h-56 bg-indigo-500/8 rounded-full blur-3xl animate-blob" style={{ animationDelay: '4s' }} />
+
+      <div className="text-center w-full max-w-md animate-slide-up relative z-10">
+        <div className="mb-10 md:mb-16">
+          {/* Logo icon */}
+          <div className="mx-auto mb-6 w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg glow-purple">
+            <span className="text-4xl md:text-5xl">🧠</span>
+          </div>
+
+          <h1 className="font-display text-4xl sm:text-5xl md:text-7xl font-black text-gradient mb-3 md:mb-4 tracking-tight">
             СВОЯ ИГРА
           </h1>
-          <p className="text-base md:text-lg text-gray-400">Интеллектуальная викторина</p>
+          <p className="text-base md:text-lg text-gray-400 font-medium tracking-wide">
+            Интеллектуальная викторина
+          </p>
         </div>
 
         <div className="flex flex-col gap-3 md:gap-4 w-full">
           <button
             onClick={() => navigate('/create')}
-            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-xl text-lg md:text-xl transition-all duration-200 shadow-lg hover:shadow-xl"
+            className="btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-4 md:py-5 px-6 md:px-8 rounded-2xl text-lg md:text-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]"
           >
-            Создать игру
+            🎮 Создать игру
           </button>
 
           <button
             onClick={() => navigate('/join')}
-            className="bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-xl text-lg md:text-xl transition-all duration-200 shadow-lg hover:shadow-xl"
+            className="btn-glow glass hover:bg-white/10 text-white font-bold py-4 md:py-5 px-6 md:px-8 rounded-2xl text-lg md:text-xl transition-all duration-300 hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]"
           >
-            Присоединиться
+            🚀 Присоединиться
           </button>
         </div>
       </div>

client/src/pages/JoinGame.jsx

@@ -9,25 +9,16 @@ function JoinGame() {
   const navigate = useNavigate()
 
   useEffect(() => {
-    // Слушаем события
     const handleGameUpdated = () => {
-      // Сохраняем в localStorage перед навигацией
       localStorage.setItem('gameSession', JSON.stringify({
-        gameCode: gameCode.toUpperCase(),
-        teamName,
-        isHost: false
+        gameCode: gameCode.toUpperCase(), teamName, isHost: false
       }))
-
       navigate(`/game/${gameCode.toUpperCase()}`, { state: { teamName } })
     }
-
-    const handleError = ({ message }) => {
-      setError(message)
-    }
+    const handleError = ({ message }) => { setError(message) }
 
     socket.on('game-updated', handleGameUpdated)
     socket.on('error', handleError)
-
     return () => {
       socket.off('game-updated', handleGameUpdated)
       socket.off('error', handleError)
@@ -41,58 +32,45 @@ function JoinGame() {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
-      <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8">
-        Присоединиться к игре
+    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 bg-pattern">
+      <div className="absolute top-1/3 left-1/4 w-56 h-56 bg-purple-500/8 rounded-full blur-3xl animate-blob" />
+
+      <div className="animate-slide-up relative z-10 w-full max-w-md">
+        <h1 className="font-display text-2xl sm:text-3xl md:text-4xl font-bold text-gradient text-center mb-6 md:mb-8">
+          Присоединиться
         </h1>
 
-      <form onSubmit={handleJoin} className="bg-slate-800 p-6 md:p-8 rounded-xl w-full max-w-md border border-slate-700 shadow-xl">
+        <form onSubmit={handleJoin} className="glass-strong p-6 md:p-8 rounded-2xl w-full shadow-xl">
           <div className="mb-4">
             <label className="block text-gray-300 mb-2 font-medium text-sm md:text-base">Код игры</label>
-          <input
-            type="text"
-            value={gameCode}
-            onChange={(e) => setGameCode(e.target.value.toUpperCase())}
-            className="w-full p-3 rounded-lg bg-slate-900 text-white border border-slate-600 focus:outline-none focus:border-blue-500 uppercase text-center text-xl md:text-2xl tracking-wider transition-colors"
-            placeholder="ABC123"
-            maxLength={6}
-            required
-          />
+            <input type="text" value={gameCode} onChange={(e) => setGameCode(e.target.value.toUpperCase())}
+              className="w-full p-3.5 rounded-xl bg-white/5 text-white border border-white/10 focus:outline-none focus:border-blue-400/50 focus:bg-white/8 uppercase text-center text-xl md:text-2xl tracking-[0.3em] font-display transition-all duration-300 placeholder-gray-500"
+              placeholder="ABC123" maxLength={6} required />
           </div>
-
           <div className="mb-6">
             <label className="block text-gray-300 mb-2 font-medium text-sm md:text-base">Название команды</label>
-          <input
-            type="text"
-            value={teamName}
-            onChange={(e) => setTeamName(e.target.value)}
-            className="w-full p-3 rounded-lg bg-slate-900 text-white border border-slate-600 focus:outline-none focus:border-blue-500 transition-colors"
-            required
-          />
+            <input type="text" value={teamName} onChange={(e) => setTeamName(e.target.value)}
+              className="w-full p-3.5 rounded-xl bg-white/5 text-white border border-white/10 focus:outline-none focus:border-blue-400/50 focus:bg-white/8 transition-all duration-300 placeholder-gray-500"
+              placeholder="Введите название" required />
           </div>
 
           {error && (
-          <div className="mb-4 p-3 bg-red-600/90 text-white rounded-lg text-sm md:text-base">
+            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 text-red-300 rounded-xl text-sm md:text-base animate-scale-in">
               {error}
             </div>
           )}
 
-        <button
-          type="submit"
-          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
-        >
+          <button type="submit"
+            className="w-full btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3.5 rounded-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]">
             Присоединиться
           </button>
-
-        <button
-          type="button"
-          onClick={() => navigate('/')}
-          className="w-full mt-3 bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg"
-        >
-          Назад
+          <button type="button" onClick={() => navigate('/')}
+            className="w-full mt-3 glass hover:bg-white/10 text-white font-bold py-3.5 rounded-xl transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
+            ← Назад
           </button>
         </form>
       </div>
+    </div>
   )
 }
 

client/tailwind.config.js

@@ -9,43 +9,54 @@ export default {
       colors: {
         'game-blue': '#0A1E3D',
         'game-gold': '#FFD700',
+        'game-purple': '#1a0533',
+        'game-deep': '#0d1b2a',
       },
       animation: {
         'blob': 'blob 7s infinite',
         'float': 'float 3s ease-in-out infinite',
         'glow': 'glow 2s ease-in-out infinite alternate',
+        'shimmer': 'shimmer 2s linear infinite',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'slide-up': 'slideUp 0.5s ease-out',
+        'scale-in': 'scaleIn 0.3s ease-out',
+        'buzz': 'buzz 0.15s ease-in-out 3',
       },
       keyframes: {
         blob: {
-          '0%': {
-            transform: 'translate(0px, 0px) scale(1)',
-          },
-          '33%': {
-            transform: 'translate(30px, -50px) scale(1.1)',
-          },
-          '66%': {
-            transform: 'translate(-20px, 20px) scale(0.9)',
-          },
-          '100%': {
-            transform: 'translate(0px, 0px) scale(1)',
-          },
+          '0%': { transform: 'translate(0px, 0px) scale(1)' },
+          '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
+          '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
+          '100%': { transform: 'translate(0px, 0px) scale(1)' },
         },
         float: {
-          '0%, 100%': {
-            transform: 'translateY(0px)',
-          },
-          '50%': {
-            transform: 'translateY(-20px)',
-          },
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-20px)' },
         },
         glow: {
-          'from': {
-            'box-shadow': '0 0 20px rgba(255, 215, 0, 0.5)',
+          'from': { 'box-shadow': '0 0 20px rgba(255, 215, 0, 0.5)' },
+          'to': { 'box-shadow': '0 0 30px rgba(255, 215, 0, 0.8)' },
         },
-          'to': {
-            'box-shadow': '0 0 30px rgba(255, 215, 0, 0.8)',
+        shimmer: {
+          '0%': { 'background-position': '-200% 0' },
+          '100%': { 'background-position': '200% 0' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        scaleIn: {
+          '0%': { transform: 'scale(0.9)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+        buzz: {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(-4px)' },
+          '75%': { transform: 'translateX(4px)' },
         },
       },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
       },
     },
   },