/* Alphabet Train standalone styles copied from word-game.css */
.word-game-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 20px;
}

.game-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 12px 25px;
	border-radius: 10px;
	margin-bottom: 15px;
	box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
	flex-wrap: wrap;
	gap: 15px;
}

.control-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.control-group label {
	font-weight: bold;
	color: white;
	font-size: 14px;
}

.control-group select {
	padding: 6px 10px;
	font-size: 13px;
	border: 2px solid white;
	border-radius: 5px;
	cursor: pointer;
	background: white;
	font-weight: bold;
	color: #667eea;
}

.start-game-btn {
	padding: 8px 20px;
	font-size: 14px;
	font-weight: bold;
	background: white;
	color: #667eea;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s;
}

.start-game-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
}

.score-display,
.timer-display,
.progress-display {
	font-size: 16px;
	font-weight: bold;
	color: white;
}

.score-display span,
.timer-display span,
.progress-display span {
	color: #ffd700;
}

.game-layout {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.left-panel {
	width: 250px;
	background: white;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.panel-header {
	text-align: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 15px;
	border-radius: 10px;
	margin-bottom: 15px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.panel-header h2 {
	font-size: 20px;
	margin: 0 0 8px 0;
	color: white;
}

.panel-header p {
	font-size: 12px;
	margin: 0;
	opacity: 0.95;
}

.left-panel h3 {
	color: #667eea;
	font-size: 16px;
	margin-bottom: 12px;
	text-align: center;
}

.instructions-list {
	list-style: none;
	padding: 0;
}

.instructions-list li {
	padding: 8px;
	margin-bottom: 6px;
	background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
	border-radius: 5px;
	font-size: 12px;
	color: #555;
	border-left: 3px solid #667eea;
}

.middle-panel {
	flex: 1;
	background: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.question-display h3,
.answers-section h3 {
	color: #667eea;
	font-size: 20px;
	margin-bottom: 15px;
	text-align: center;
	padding: 12px;
	background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
	border-radius: 8px;
	border: 2px solid #667eea;
}

.letter-train {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 40px 30px 30px;
	background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 50%, #90EE90 100%);
	border-radius: 15px;
	border: 3px solid #667eea;
	min-height: 200px;
	position: relative;
	overflow: hidden;
}

.letter-train::before {
	content: '';
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, #8B4513 0px, #8B4513 60px, transparent 60px, transparent 80px);
	z-index: 1;
}

.letter-train::after {
	content: '';
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	height: 8px;
	background: linear-gradient(to bottom, #555, #333);
	border-radius: 2px;
	z-index: 1;
}

.train-wrapper {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	transition: transform 1.5s ease-in-out;
	z-index: 10;
	position: relative;
}

.train-wrapper.moving { transform: translateX(-200%); }

.train-car { position: relative; display: flex; flex-direction: column; align-items: center; }
.train-car.engine { margin-right: 5px; }
.train-car.engine .letter-box { background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%); border-color: #8B0000; color: white; position: relative; border-radius: 10px 10px 5px 5px; }
.train-car.engine .letter-box::before { content: ''; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 40px; height: 30px; background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%); border-radius: 5px 5px 0 0; border: 3px solid #8B0000; border-bottom: none; }
.train-car.engine .letter-box::after { content: '🚂'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 20px; }
.train-car.engine.moving::before { content: '💨💨💨'; position: absolute; top: -60px; left: 50%; font-size: 24px; animation: smoke 0.8s ease-out infinite; letter-spacing: 5px; }
.train-car.engine.moving::after { content: '💨'; position: absolute; top: -40px; left: 30%; font-size: 20px; animation: smokeTrail 1s ease-out infinite; animation-delay: 0.3s; }

@keyframes smoke { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 50% { opacity: 0.7; transform: translate(-80%, -20px) scale(1.2); } 100% { opacity: 0; transform: translate(-120%, -40px) scale(1.5); } }
@keyframes smokeTrail { 0% { opacity: 0.8; transform: translate(0, 0) scale(0.8); } 100% { opacity: 0; transform: translate(-100px, -30px) scale(1.3); } }
.train-wrapper.moving::before { content: '💨'; position: absolute; top: 10px; left: 80px; font-size: 28px; animation: smokeBig 1.2s ease-out infinite; animation-delay: 0.6s; z-index: 15; }
@keyframes smokeBig { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-150px, -50px) scale(2); } }

.letter-box { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); border: 4px solid #FF8C00; border-radius: 8px 8px 5px 5px; font-size: 48px; font-weight: bold; color: #333; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); text-transform: uppercase; position: relative; }
.letter-box:not(.engine .letter-box)::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 5px; pointer-events: none; }
.letter-box.empty { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: 4px dashed white; animation: bounce 1s infinite; }
.letter-box.empty::before { border-color: rgba(255, 255, 255, 0.5); }
.letter-box.empty::after { content: '?'; font-size: 64px; }
.letter-box.correct { background: linear-gradient(135deg, #90EE90 0%, #32CD32 100%); border-color: #228B22; color: white; animation: correctPulse 0.6s; }
.letter-box.wrong { animation: shake 0.5s; }

.train-wheels { display: flex; gap: 30px; margin-top: -10px; z-index: 5; }
.wheel { width: 35px; height: 35px; background: radial-gradient(circle, #333 30%, #555 60%, #222 100%); border-radius: 50%; border: 4px solid #111; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3); position: relative; }
.train-wrapper.moving .wheel { animation: rotateWheel 0.5s linear infinite; }
@keyframes rotateWheel { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.wheel::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #666; border-radius: 50%; border: 2px solid #888; }
.wheel::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 2px; background: #888; }
.train-connector { font-size: 28px; margin: 0 -8px; margin-bottom: 35px; z-index: 8; color: #333; }

.answers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }
.answer-item { padding: 20px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 3px solid #667eea; border-radius: 10px; font-size: 36px; font-weight: bold; color: #667eea; cursor: pointer; transition: all 0.3s; text-align: center; user-select: none; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); text-transform: uppercase; }
.answer-item:hover { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); transform: scale(1.08); box-shadow: 0 5px 12px rgba(102, 126, 234, 0.3); }
.answer-item.selected { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-color: #667eea; transform: scale(1.1); }
.answer-item.correct { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); color: #28a745; border-color: #28a745; animation: correctPulse 0.5s; }
.answer-item.wrong { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: white; border-color: #dc3545; animation: shake 0.5s; }
.answer-item.hint { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); color: #856404; border-color: #ffc107; animation: pulse 1s; }
.answer-item.disabled { opacity: 0.5; pointer-events: none; }

.ads-panel { width: 250px; padding: 15px; background-color: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); flex-shrink: 0; }
.ads-panel h3 { color: #667eea; font-size: 16px; margin-bottom: 12px; text-align: center; }
.ad-box { margin-bottom: 12px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.ad-placeholder { width: 100%; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; color: white; font-size: 16px; font-weight: bold; }

.game-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.hint-btn, .skip-btn { flex: 1; max-width: 180px; padding: 12px 20px; font-size: 15px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.hint-btn { background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%); color: #333; }
.hint-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4); }
.skip-btn { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); color: white; }
.skip-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4); }

.celebration-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.celebration-content { background: white; padding: 50px; border-radius: 20px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.celebration-content h2 { color: #667eea; font-size: 42px; margin-bottom: 20px; }
.celebration-content p { font-size: 24px; color: #555; margin-bottom: 20px; }
.play-again-btn { padding: 15px 40px; font-size: 20px; font-weight: bold; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; cursor: pointer; }
.play-again-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes correctPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); }
}

@media (max-width: 1200px) { .game-layout { flex-wrap: wrap; } .ads-panel { width: 100%; } }
@media (max-width: 768px) {
	.game-info { flex-direction: column; align-items: stretch; padding: 10px 15px; }
	.control-group { width: 100%; justify-content: space-between; }
	.start-game-btn { width: 100%; }
	.game-layout { flex-direction: column; }
	.left-panel { width: 100%; }
	.letter-box { width: 70px; height: 70px; font-size: 36px; }
	.letter-box.empty::after { font-size: 48px; }
	.answers-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
	.answer-item { font-size: 28px; padding: 15px 10px; }
	.game-actions { flex-direction: column; }
	.hint-btn, .skip-btn { max-width: 100%; }
}

@media (max-width: 600px) {
	.word-game-container { padding: 10px; }

	.middle-panel {
		padding: 16px;
		width: 100%;
		max-width: 100%;
	}

	.letter-train {
		padding: 24px 16px 20px;
		min-height: 160px;
	}

	.letter-box {
		width: 60px;
		height: 60px;
		font-size: 32px;
	}

	.letter-box.empty::after { font-size: 40px; }

	.answers-grid {
		grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
		gap: 10px;
	}

	.answer-item {
		font-size: 24px;
		padding: 12px 8px;
	}
}