/* Chess Master Academy — Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #08080c; overflow-x: hidden; }
#root { min-height: 100vh; }

/* Loading state */
#loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: #08080c; color: rgba(255,255,255,0.4);
  font-family: 'Palatino Linotype', Georgia, serif; flex-direction: column; gap: 16px;
}
#loading .spinner {
  width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.3); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bounceIn { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes piecePlace { 0% { transform: scale(1.4); opacity: 0.3; } 50% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
@keyframes glowPulse { 0% { filter: drop-shadow(0 0 4px rgba(255,210,50,0.4)); } 50% { filter: drop-shadow(0 0 12px rgba(255,210,50,0.7)); } 100% { filter: drop-shadow(0 0 4px rgba(255,210,50,0.4)); } }
@keyframes correctFlash { 0% { background: rgba(40,167,69,0.0); } 30% { background: rgba(40,167,69,0.15); } 100% { background: rgba(40,167,69,0.0); } }
@keyframes shakeWrong { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes levelTransition { 0% { opacity: 0; transform: scale(0.96) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes musicPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }