/* Game Styles */.game-container { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; margin: 2rem 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}.game-info { text-align: center; margin-bottom: 2rem;}.game-stats { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;}.stat-item { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 600; text-align: center; min-width: 120px;}.stat-label { display: block; font-size: 0.875rem; opacity: 0.9;}.stat-value { display: block; font-size: 1.25rem; font-weight: 700;}/* Memory Game */.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 400px; margin: 2rem auto;}.memory-card { aspect-ratio: 1; background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer; transition: all 0.3s ease; border: 3px solid transparent; position: relative; overflow: hidden;}.memory-card:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);}.memory-card.flipped { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); transform: rotateY(180deg);}.memory-card.matched { background: linear-gradient(135deg, #96ceb4 0%, #85c1a3 100%); cursor: default;}.memory-card.matched:hover { transform: none;}/* Math Game */.math-problem { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); color: white; padding: 3rem 2rem; border-radius: 20px; text-align: center; margin: 2rem 0; font-size: 3rem; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.math-input { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.25rem; border: 3px solid #4ecdc4; border-radius: 15px; text-align: center; margin: 1rem auto; display: block; font-weight: 600;}.math-input:focus { outline: none; border-color: #ff6b6b; box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);}.check-btn { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); color: white; border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 600; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; margin: 1rem;}.check-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);}/* Word Game */.word-display { background: linear-gradient(135deg, #96ceb4 0%, #85c1a3 100%); color: white; padding: 2rem; border-radius: 20px; text-align: center; margin: 2rem 0; font-size: 2rem; font-weight: 700; letter-spacing: 0.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.word-input { width: 100%; max-width: 400px; padding: 1rem; font-size: 1.25rem; border: 3px solid #96ceb4; border-radius: 15px; text-align: center; margin: 1rem auto; display: block; font-weight: 600;}.word-input:focus { outline: none; border-color: #ff6b6b; box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);}.hint-btn { background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%); color: white; border: none; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; margin: 0.5rem;}.hint-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(254, 202, 87, 0.4);}/* Logic Game */.logic-sequence { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap;}.logic-item { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; transition: all 0.3s ease;}.logic-item:hover { transform: scale(1.1);}.logic-options { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap;}.logic-option { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; transition: all 0.3s ease; border: 4px solid transparent;}.logic-option:hover { transform: scale(1.1); border-color: white;}.logic-option.selected { border-color: #ff6b6b; box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);}/* Visual Game */.visual-sequence { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap;}.visual-item { width: 80px; height: 80px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer; transition: all 0.3s ease; border: 4px solid transparent;}.visual-item:hover { transform: scale(1.05); border-color: #ff6b6b;}.visual-item.highlight { animation: pulse 0.5s; border-color: #feca57; box-shadow: 0 0 20px rgba(254, 202, 87, 0.5);}/* Game Controls */.game-controls { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap;}.control-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; min-width: 120px;}.control-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);}.control-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none;}/* Difficulty Selection */.difficulty-selection { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap;}.difficulty-btn { background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); color: #333; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px);}.difficulty-btn:hover,.difficulty-btn.active { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); border-color: transparent; color: white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);}/* Success/Error Messages */.message { padding: 1rem 2rem; border-radius: 15px; text-align: center; margin: 1rem 0; font-weight: 600; font-size: 1.1rem;}.message.success { background: linear-gradient(135deg, #96ceb4 0%, #85c1a3 100%); color: white;}.message.error { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white;}.message.info { background: linear-gradient(135deg, #54a0ff 0%, #2e86de 100%); color: white;}/* Responsive Game Styles */@media (max-width: 768px) { .memory-grid { grid-template-columns: repeat(3, 1fr); max-width: 300px; } .game-stats { gap: 1rem; } .stat-item { min-width: 100px; padding: 0.75rem 1rem; } .math-problem { font-size: 2rem; padding: 2rem 1rem; } .word-display { font-size: 1.5rem; letter-spacing: 0.25rem; } .logic-item, .visual-item { width: 50px; height: 50px; font-size: 1.25rem; } .logic-option { width: 60px; height: 60px; font-size: 1.5rem; }}@media (max-width: 480px) { .memory-grid { grid-template-columns: repeat(2, 1fr); max-width: 200px; gap: 0.5rem; } .memory-card { font-size: 1.5rem; } .game-container { padding: 1rem; } .math-problem { font-size: 1.5rem; padding: 1.5rem 1rem; } .word-display { font-size: 1.25rem; letter-spacing: 0.1rem; }}