* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: white; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .screen { display: none; width: 100%; max-width: 500px; padding: 20px; text-align: center; } .screen.active { display: flex; flex-direction: column; align-items: center; gap: 20px; } h1 { font-size: 2.5rem; color: #FFD700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .btn { padding: 15px 40px; font-size: 1.2rem; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .btn-primary { background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: white; box-shadow: 0 4px 15px rgba(255,107,107,0.4); } .btn-primary:hover { transform: scale(1.05); } .instructions { font-size: 1rem; color: #aaa; line-height: 1.5; } .timer { font-size: 2rem; font-weight: bold; color: #FFD700; } .score { font-size: 1.5rem; color: #fff; } .target-color { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 15px; } #target-name { font-size: 2rem; font-weight: bold; text-transform: uppercase; } .color-patch { width: 100px; height: 100px; border-radius: 15px; border: 3px solid white; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } #camera-feed { width: 100%; max-width: 300px; border-radius: 15px; border: 3px solid #333; } @keyframes celebrate { 0% { transform: scale(1); } 50% { transform: scale(1.3) rotate(5deg); } 100% { transform: scale(1); } } .celebrating { animation: celebrate 0.5s ease-in-out; } .final-score { font-size: 3rem; color: #FFD700; margin: 20px 0; } .new-high-score { font-size: 1.5rem; color: #44BB44; animation: pulse 1s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (min-width: 768px) { .screen { max-width: 800px; } .color-patch { width: 150px; height: 150px; } #camera-feed { max-width: 500px; } h1 { font-size: 4rem; } .timer { font-size: 3rem; } }

Color Hunt

Find the colors shown on screen using your camera.
5 minutes to get the highest score!

10:00
Score: 0
RED

Time's Up!

Score: 0