/* --- Google Font for Tamil Stories --- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;700&display=swap');

/* --- AI Story Card Styling --- */
.ai-story-card { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 25px; margin: 25px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); font-family: 'Baloo Thambi 2', cursive; }
.ai-story-card .story-text { font-size: 1.2em; line-height: 1.8; color: #333; }
.ai-story-card .listen-button { display: inline-block; background-color: #58c47a; color: white; border-radius: 50px; padding: 12px 30px; font-size: 1em; font-weight: bold; cursor: pointer; border: none; margin-top: 20px; transition: background-color 0.2s; text-align: center; }
.ai-story-card .listen-button:hover { background-color: #4aab69; }
.ai-story-card .hidden-player { display: none; }

/* --- AI Reader Styling --- */
.ai-reader-container { position: relative; padding-right: 40px; }
.ai-reader-icon { position: absolute; top: 5px; right: 0; font-size: 24px; color: #58c47a; cursor: pointer; transition: transform 0.2s, color 0.2s; }
.ai-reader-icon:hover { transform: scale(1.2); }
.ai-reader-icon.playing { color: #3d5afe; animation: pulse-reader 1s infinite; }
@keyframes pulse-reader { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* --- AI Companion Styling --- */
#ai-companion-wrapper { position: fixed; bottom: 20px; right: 20px; z-index: 99999; transform: translateY(200%); transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: flex-end; }
#ai-companion-wrapper.visible { transform: translateY(0); }
.companion-character { position: relative; cursor: pointer; }
.companion-character img { max-width: 150px; height: auto; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.speaker-icon { position: absolute; top: 10px; right: 10px; font-size: 24px; background-color: rgba(0, 123, 255, 0.8); color: white; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(0.95); } 70% { transform: scale(1.05); } 100% { transform: scale(0.95); } }
.companion-speech-bubble { position: relative; margin-bottom: 12px; width: 250px; background-color: #ffffff; padding: 15px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-family: 'Baloo Thambi 2', cursive; font-size: 16px; line-height: 1.5; color: #333; transform: scale(0.8); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: bottom right; }
.companion-speech-bubble::after { content: ''; position: absolute; bottom: -10px; right: 30px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #ffffff; border-bottom: 0; }
#ai-companion-wrapper.visible .companion-speech-bubble { transform: scale(1); opacity: 1; }

/* --- AI Riddle Game Styling --- */
.ai-riddle-card { position: relative; background-color: #fafafa; border: 2px dashed #d1e3ff; border-radius: 16px; padding: 25px; margin: 30px 0; text-align: center; font-family: 'Baloo Thambi 2', cursive; }
.riddle-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 16px; z-index: 10; }
.play-riddle-button { font-size: 60px; background-color: #58c47a; color: white; width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.2s; }
.riddle-overlay:hover .play-riddle-button { transform: scale(1.1); }
.ai-riddle-card h3 { font-size: 1.5em; color: #3d5afe; margin-top: 0; margin-bottom: 20px; }
.riddle-question-area { display: flex; align-items: center; justify-content: center; gap: 15px; font-style: italic; color: #555; }
.replay-riddle-button { font-size: 24px; cursor: pointer; color: #555; transition: color 0.2s; }
.replay-riddle-button:hover { color: #3d5afe; }
.riddle-choices { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px;}
.riddle-choice { border: 4px solid transparent; border-radius: 12px; padding: 10px; background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.2s ease-in-out; }
.riddle-choice:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
.riddle-choice img { display: block; width: 120px; height: 120px; object-fit: contain; }
.riddle-choice.correct { border-color: #4caf50; animation: bounce 0.5s; }
.riddle-choice.incorrect { border-color: #f44336; animation: shake 0.5s; }
.riddle-feedback { margin-top: 20px; font-size: 1.2em; font-weight: bold; display: none; }
.riddle-feedback.correct { color: #4caf50; }
.riddle-feedback.incorrect { color: #f44336; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* --- AI Tracing Game Styling --- */
.ai-trace-container { width: 100%; max-width: 500px; margin: 20px auto; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; position: relative; z-index: 1; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ai-trace-canvas { display: block; background-color: #f9f9f9; }
.ai-trace-controls { display: flex; justify-content: space-between; padding: 10px; background-color: #f1f1f1; }
.ai-trace-controls button { font-size: 16px; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #3498db; color: white; }
.ai-trace-controls button:hover { background-color: #2980b9; }
.ai-trace-container.success .ai-trace-canvas { animation: success-glow 1s; }
@keyframes success-glow { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 50% { box-shadow: 0 0 20px 10px rgba(46, 204, 113, 0.4); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } }

/* --- Sound Game Styling --- */
.sound-game-card { background-color: #f0f4f8; border: 1px solid #d9e2ec; border-radius: 16px; padding: 25px; margin: 30px 0; font-family: 'Baloo Thambi 2', cursive; text-align: center; }
.sound-game-card h3 { font-size: 1.5em; color: #1a237e; margin-top: 0; margin-bottom: 20px; }
.sound-game-play-button { display: inline-flex; align-items: center; gap: 10px; background-color: #ff7043; color: white; border: none; border-radius: 50px; padding: 15px 30px; font-size: 1.2em; font-weight: bold; cursor: pointer; margin-bottom: 25px; transition: background-color 0.2s; }
.sound-game-play-button:hover { background-color: #f4511e; }
.sound-game-play-button span { font-size: 1.5em; }
.sound-game-choices { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.sound-game-choice { border: 4px solid transparent; border-radius: 12px; padding: 10px; background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.2s ease-in-out; }
.sound-game-choice:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
.sound-game-choice img { display: block; width: 120px; height: 120px; object-fit: contain; }
.sound-game-choice.correct { border-color: #66bb6a; animation: bounce 0.5s; }
.sound-game-choice.incorrect { border-color: #ef5350; animation: shake 0.5s; }

/* --- Memory Match Game Styling --- */
.memory-game-card { background-color: #e3f2fd; border-radius: 16px; padding: 20px; margin: 30px 0; }
.memory-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; perspective: 1000px; }
.memory-card { background-color: transparent; width: 120px; height: 120px; cursor: pointer; transform-style: preserve-3d; transition: transform 0.6s; }
.card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 12px; }
.memory-card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; }
.card-front { background-color: #42a5f5; border: 4px solid white; }
.card-back { background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotateY(180deg); border: 4px solid #bbdefb; }
.memory-card.matched .card-back { border-color: #66bb6a; }
.memory-game-feedback { margin-top: 20px; font-size: 1.5em; font-weight: bold; text-align: center; display: none; }
.memory-game-feedback.win .feedback-text { color: #4caf50; }
.replay-button { display: inline-block; background-color: #ff7043; color: white; border: none; border-radius: 50px; padding: 12px 30px; font-size: 1em; font-weight: bold; cursor: pointer; margin-top: 15px; transition: background-color 0.2s; }
.replay-button:hover { background-color: #f4511e; }