Major UI overhaul: glassmorphism cards, larger thumbnails, better animations, polished game feel

index.html

@@ -16,69 +16,94 @@
 
         html, body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
             height: 100vh;
             height: 100dvh;
             color: #fff;
             overflow: hidden;
         }
 
+        /* Animated background particles effect */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image:
+                radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 140, 0, 0.03) 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, rgba(96, 165, 250, 0.02) 0%, transparent 40%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
         .container {
             display: flex;
             flex-direction: column;
             height: 100vh;
             height: 100dvh;
-            padding: 1vh 2vw;
-            max-width: 1600px;
-            margin: 0 auto;
+            padding: 1.5vh 3vw;
+            position: relative;
+            z-index: 1;
         }
 
-        /* Header */
+        /* Header - More compact */
         header {
             text-align: center;
-            padding: 0.5vh 0;
+            padding: 0.5vh 0 1vh;
             flex-shrink: 0;
         }
 
         h1 {
-            font-size: clamp(1.2rem, 3vw, 2rem);
+            font-size: clamp(1.5rem, 3.5vw, 2.5rem);
             font-weight: 800;
-            background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
+            background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #ff8c00 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            text-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
+            letter-spacing: -0.02em;
         }
 
         .subtitle {
             color: #94a3b8;
-            font-size: clamp(0.7rem, 1.5vw, 0.9rem);
-            margin-top: 0.3vh;
+            font-size: clamp(0.8rem, 1.5vw, 1rem);
+            margin-top: 0.5vh;
+            font-weight: 500;
         }
 
-        /* Stats Bar */
+        /* Stats Bar - Horizontal pill design */
         .stats-bar {
             display: flex;
             justify-content: center;
-            gap: clamp(15px, 4vw, 40px);
-            padding: 1vh 0;
+            gap: clamp(20px, 5vw, 60px);
+            padding: 1.5vh 0;
             flex-shrink: 0;
         }
 
         .stat {
             text-align: center;
+            background: rgba(255, 255, 255, 0.03);
+            padding: clamp(8px, 1vh, 12px) clamp(20px, 3vw, 40px);
+            border-radius: 50px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(10px);
         }
 
         .stat-value {
-            font-size: clamp(1rem, 2.5vw, 1.5rem);
+            font-size: clamp(1.2rem, 2.8vw, 1.8rem);
             font-weight: 700;
             color: #ffd700;
         }
 
         .stat-label {
-            font-size: clamp(0.6rem, 1vw, 0.75rem);
+            font-size: clamp(0.65rem, 1vw, 0.8rem);
             color: #64748b;
             text-transform: uppercase;
-            letter-spacing: 1px;
+            letter-spacing: 1.5px;
+            margin-top: 2px;
         }
 
         .streak-fire {
@@ -93,97 +118,132 @@
         /* Result Message */
         .result-message {
             text-align: center;
-            font-size: clamp(0.9rem, 2vw, 1.3rem);
+            font-size: clamp(1.1rem, 2.5vw, 1.6rem);
             font-weight: 700;
-            min-height: 2vh;
+            min-height: 3vh;
             flex-shrink: 0;
+            text-shadow: 0 2px 20px currentColor;
+            transition: all 0.3s ease;
         }
 
         .result-message.correct { color: #22c55e; }
         .result-message.wrong { color: #ef4444; }
 
-        /* Game Area */
+        /* Game Area - Full width, prominent cards */
         .game-area {
             display: flex;
-            gap: clamp(10px, 2vw, 30px);
+            gap: clamp(15px, 3vw, 50px);
             justify-content: center;
             align-items: stretch;
             flex: 1;
             min-height: 0;
-            padding: 1vh 0;
+            padding: 1vh 2vw;
         }
 
         .vs-divider {
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: clamp(1.2rem, 2.5vw, 2rem);
+            font-size: clamp(1.8rem, 4vw, 3rem);
             font-weight: 800;
             color: #ffd700;
-            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+            text-shadow:
+                0 0 30px rgba(255, 215, 0, 0.6),
+                0 0 60px rgba(255, 215, 0, 0.3);
             flex-shrink: 0;
-            padding: 0 1vw;
+            padding: 0 2vw;
+            position: relative;
+        }
+
+        .vs-divider::before,
+        .vs-divider::after {
+            content: '';
+            position: absolute;
+            width: 3px;
+            height: 60%;
+            background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.3), transparent);
         }
 
-        /* Paper Card */
+        .vs-divider::before { left: 0; }
+        .vs-divider::after { right: 0; }
+
+        /* Paper Card - Larger, more prominent */
         .paper-card {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: clamp(10px, 1.5vw, 20px);
-            padding: clamp(10px, 1.5vw, 20px);
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
+            border-radius: clamp(16px, 2vw, 28px);
+            padding: clamp(16px, 2.5vw, 32px);
             flex: 1;
-            max-width: 500px;
+            max-width: 700px;
+            min-width: 280px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            border: 2px solid transparent;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 2px solid rgba(255, 255, 255, 0.1);
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            backdrop-filter: blur(20px);
+            box-shadow:
+                0 4px 30px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
 
         .paper-card:hover {
-            border-color: rgba(255, 215, 0, 0.3);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transform: translateY(-8px) scale(1.02);
+            border-color: rgba(255, 215, 0, 0.5);
+            box-shadow:
+                0 20px 60px rgba(0, 0, 0, 0.4),
+                0 0 40px rgba(255, 215, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.15);
         }
 
         .paper-card.correct {
             border-color: #22c55e;
-            background: rgba(34, 197, 94, 0.1);
+            background: linear-gradient(145deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
+            box-shadow:
+                0 0 50px rgba(34, 197, 94, 0.3),
+                inset 0 0 30px rgba(34, 197, 94, 0.1);
         }
 
         .paper-card.wrong {
             border-color: #ef4444;
-            background: rgba(239, 68, 68, 0.1);
+            background: linear-gradient(145deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.05) 100%);
+            box-shadow:
+                0 0 50px rgba(239, 68, 68, 0.3),
+                inset 0 0 30px rgba(239, 68, 68, 0.1);
         }
 
         .paper-card.disabled {
             pointer-events: none;
         }
 
+        /* Thumbnail - Larger and more prominent */
         .paper-thumbnail {
             width: 100%;
-            height: clamp(80px, 15vh, 180px);
+            height: clamp(120px, 25vh, 280px);
             object-fit: cover;
-            border-radius: clamp(6px, 1vw, 12px);
+            border-radius: clamp(10px, 1.5vw, 18px);
             background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
             flex-shrink: 0;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
         }
 
         .paper-title {
-            font-size: clamp(0.75rem, 1.3vw, 1rem);
-            font-weight: 600;
-            line-height: 1.3;
-            margin: clamp(6px, 1vh, 12px) 0;
+            font-size: clamp(1rem, 1.8vw, 1.4rem);
+            font-weight: 700;
+            line-height: 1.35;
+            margin: clamp(12px, 2vh, 20px) 0 clamp(8px, 1vh, 12px);
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
             flex-shrink: 0;
+            color: #f8fafc;
         }
 
         .paper-authors {
-            font-size: clamp(0.65rem, 1vw, 0.8rem);
+            font-size: clamp(0.75rem, 1.1vw, 0.95rem);
             color: #94a3b8;
-            margin-bottom: clamp(4px, 0.5vh, 8px);
+            margin-bottom: clamp(8px, 1vh, 14px);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -191,11 +251,11 @@
         }
 
         .paper-summary {
-            font-size: clamp(0.65rem, 1vw, 0.85rem);
+            font-size: clamp(0.8rem, 1.2vw, 1rem);
             color: #cbd5e1;
-            line-height: 1.4;
+            line-height: 1.55;
             display: -webkit-box;
-            -webkit-line-clamp: 3;
+            -webkit-line-clamp: 4;
             -webkit-box-orient: vertical;
             overflow: hidden;
             flex: 1;
@@ -205,101 +265,144 @@
         .paper-meta {
             display: flex;
             align-items: center;
-            gap: clamp(8px, 1vw, 15px);
-            padding-top: clamp(6px, 1vh, 12px);
+            gap: clamp(12px, 1.5vw, 20px);
+            padding-top: clamp(12px, 1.5vh, 18px);
             margin-top: auto;
             border-top: 1px solid rgba(255, 255, 255, 0.1);
             flex-shrink: 0;
         }
 
         .upvote-display {
-            font-weight: 600;
+            font-weight: 700;
             color: #ffd700;
-            font-size: clamp(0.8rem, 1.2vw, 1.1rem);
+            font-size: clamp(1rem, 1.5vw, 1.3rem);
             opacity: 0;
-            transition: opacity 0.3s ease;
+            transition: all 0.4s ease;
+            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
         }
 
-        .upvote-display.revealed { opacity: 1; }
+        .upvote-display.revealed {
+            opacity: 1;
+            animation: revealBounce 0.5s ease;
+        }
+
+        @keyframes revealBounce {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); opacity: 1; }
+        }
 
         .vote-hidden {
-            font-size: clamp(0.9rem, 1.3vw, 1.2rem);
+            font-size: clamp(1.1rem, 1.5vw, 1.4rem);
             color: #64748b;
         }
 
         .click-hint {
-            font-size: clamp(0.6rem, 0.9vw, 0.75rem);
+            font-size: clamp(0.7rem, 1vw, 0.85rem);
             color: #64748b;
             text-align: center;
-            margin-top: clamp(4px, 0.5vh, 8px);
+            margin-top: clamp(8px, 1vh, 12px);
             flex-shrink: 0;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            transition: opacity 0.3s ease;
         }
 
         /* Paper Link */
         .paper-link {
             color: #60a5fa;
             text-decoration: none;
-            font-size: clamp(0.65rem, 1vw, 0.8rem);
+            font-size: clamp(0.75rem, 1.1vw, 0.9rem);
             pointer-events: auto;
             position: relative;
             z-index: 10;
             margin-left: auto;
+            font-weight: 600;
+            padding: 4px 12px;
+            border-radius: 20px;
+            background: rgba(96, 165, 250, 0.1);
+            transition: all 0.3s ease;
         }
 
         .paper-link:hover {
-            color: #93c5fd;
-            text-decoration: underline;
+            color: #fff;
+            background: rgba(96, 165, 250, 0.3);
         }
 
         /* Next Round Button */
         .next-btn {
             display: none;
-            margin: 1vh auto;
-            padding: clamp(8px, 1.2vh, 12px) clamp(20px, 3vw, 35px);
-            font-size: clamp(0.8rem, 1.2vw, 1rem);
-            font-weight: 600;
+            margin: 2vh auto;
+            padding: clamp(12px, 1.8vh, 18px) clamp(30px, 5vw, 50px);
+            font-size: clamp(1rem, 1.4vw, 1.2rem);
+            font-weight: 700;
             background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
             color: #1a1a2e;
             border: none;
             border-radius: 50px;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             flex-shrink: 0;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
         }
 
         .next-btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
+            transform: scale(1.08);
+            box-shadow: 0 8px 40px rgba(255, 215, 0, 0.5);
         }
 
         .next-btn.visible {
             display: block;
+            animation: slideUp 0.4s ease;
+        }
+
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
         /* Footer */
         footer {
             text-align: center;
-            padding: 0.5vh 0;
+            padding: 1vh 0;
             color: #64748b;
-            font-size: clamp(0.6rem, 1vw, 0.75rem);
+            font-size: clamp(0.7rem, 1vw, 0.85rem);
             flex-shrink: 0;
         }
 
         footer a {
             color: #ffd700;
             text-decoration: none;
+            font-weight: 600;
+            transition: color 0.3s ease;
+        }
+
+        footer a:hover {
+            color: #ffaa00;
         }
 
-        /* High Score */
+        /* High Score - More prominent */
         .high-score {
             position: fixed;
-            top: 1vh;
-            right: 2vw;
-            background: rgba(255, 255, 255, 0.1);
-            padding: clamp(5px, 0.8vh, 10px) clamp(10px, 1.5vw, 20px);
-            border-radius: 8px;
-            font-size: clamp(0.7rem, 1vw, 0.85rem);
+            top: 1.5vh;
+            right: 3vw;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            padding: clamp(8px, 1vh, 14px) clamp(16px, 2vw, 28px);
+            border-radius: 50px;
+            font-size: clamp(0.8rem, 1.1vw, 1rem);
             z-index: 100;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            font-weight: 600;
         }
 
         .high-score span {
@@ -314,20 +417,21 @@
             align-items: center;
             justify-content: center;
             flex: 1;
-            gap: 15px;
+            gap: 20px;
         }
 
         .spinner {
-            width: clamp(30px, 5vw, 50px);
-            height: clamp(30px, 5vw, 50px);
-            border: 3px solid rgba(255, 215, 0, 0.2);
+            width: clamp(40px, 6vw, 60px);
+            height: clamp(40px, 6vw, 60px);
+            border: 4px solid rgba(255, 215, 0, 0.2);
             border-top-color: #ffd700;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
 
         .loading p {
-            font-size: clamp(0.8rem, 1.2vw, 1rem);
+            font-size: clamp(1rem, 1.4vw, 1.2rem);
+            color: #94a3b8;
         }
 
         @keyframes spin {
@@ -345,52 +449,122 @@
         }
 
         .error-message button {
-            margin-top: 15px;
-            padding: 8px 25px;
-            background: #ffd700;
+            margin-top: 20px;
+            padding: 12px 35px;
+            background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
             color: #1a1a2e;
             border: none;
-            border-radius: 20px;
+            border-radius: 50px;
             cursor: pointer;
-            font-weight: 600;
+            font-weight: 700;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .error-message button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
+        }
+
+        /* Tablet: Slightly smaller cards */
+        @media (max-width: 1200px) {
+            .paper-card {
+                max-width: 550px;
+            }
+
+            .paper-thumbnail {
+                height: clamp(100px, 20vh, 200px);
+            }
         }
 
         /* Mobile: Stack vertically */
-        @media (max-width: 800px), (max-height: 600px) {
+        @media (max-width: 800px), (max-height: 700px) {
+            .container {
+                padding: 1vh 4vw;
+            }
+
             .game-area {
                 flex-direction: column;
                 align-items: center;
+                padding: 0.5vh 0;
             }
 
             .vs-divider {
-                padding: 0.5vh 0;
-                transform: rotate(0deg);
+                padding: 1vh 0;
+                font-size: clamp(1.5rem, 3vw, 2rem);
+            }
+
+            .vs-divider::before,
+            .vs-divider::after {
+                display: none;
             }
 
             .paper-card {
                 max-width: 100%;
                 width: 100%;
                 flex: none;
-                max-height: 35vh;
+                height: auto;
+                max-height: 38vh;
+                padding: clamp(12px, 2vw, 20px);
             }
 
             .paper-thumbnail {
-                height: clamp(50px, 10vh, 100px);
+                height: clamp(60px, 12vh, 120px);
+            }
+
+            .paper-title {
+                font-size: clamp(0.9rem, 1.5vw, 1.1rem);
+                margin: 8px 0 6px;
             }
 
             .paper-summary {
                 -webkit-line-clamp: 2;
             }
+
+            .stats-bar {
+                gap: clamp(10px, 3vw, 25px);
+            }
+
+            .stat {
+                padding: 6px 16px;
+            }
         }
 
         /* Very small screens */
+        @media (max-height: 600px) {
+            .paper-thumbnail {
+                height: clamp(50px, 10vh, 80px);
+            }
+
+            .paper-card {
+                max-height: 35vh;
+            }
+
+            .paper-summary {
+                -webkit-line-clamp: 1;
+            }
+
+            header {
+                padding: 0.3vh 0 0.5vh;
+            }
+
+            .stats-bar {
+                padding: 0.5vh 0;
+            }
+        }
+
+        /* Extra small height */
         @media (max-height: 500px) {
             .paper-thumbnail {
                 display: none;
             }
 
             .paper-card {
-                max-height: 30vh;
+                max-height: 32vh;
+            }
+
+            .subtitle {
+                display: none;
             }
         }
     </style>