/* أنماط مخصصة لمختبر العلوم الذكي */
:root {
  --color-teal: #0E8C7F;
  --color-blue: #2F6FB2;
  --color-amber: #F3A93C;
  --color-purple: #6B4E9B;
  --color-ink: #1E2A32;
  --color-paper: #F6F2E9;
  --color-card-border: #E3DBC9;
}

body {
  background-color: var(--color-paper);
  background-image: 
    linear-gradient(to right, rgba(231, 224, 210, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(231, 224, 210, 0.5) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* نمط جدار المختبر خلف طاولة العمل */
.lab-wall-pattern {
  background-image: 
    linear-gradient(90deg, rgba(217, 199, 167, 0.3) 1px, transparent 1px),
    linear-gradient(rgba(217, 199, 167, 0.3) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* أزرار مخصصة بمقاس لمس مريح */
.btn-primary {
  background-color: var(--color-teal);
  color: #FFFFFF;
  border-radius: 1rem;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(14, 140, 127, 0.25);
  min-height: 48px;
}
.btn-primary:hover:not(:disabled) {
  background-color: #0B7469;
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-secondary {
  background-color: #FFFFFF;
  color: var(--color-teal);
  border: 1px solid var(--color-card-border);
  border-radius: 1rem;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  transition: all 0.2s ease;
  min-height: 48px;
}
.btn-secondary:hover {
  background-color: #F8F6F0;
}
.btn-secondary:active {
  transform: scale(0.98);
}

.btn-purple {
  background-color: var(--color-purple);
  color: #FFFFFF;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(107, 78, 155, 0.25);
  min-height: 40px;
}
.btn-purple:hover {
  background-color: #553D7C;
}

/* شريط التنقل السفلي */
.nav-btn {
  min-height: 48px;
}
.nav-btn.active {
  color: var(--color-teal);
  background-color: #E7F6F4;
}

/* مسارات الاختيارات */
.choice-btn {
  min-height: 48px;
  text-align: right;
  border-radius: 1rem;
  border: 2px solid #E3DBC9;
  background-color: #FFFFFF;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1E2A32;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.choice-btn:hover {
  border-color: #0E8C7F;
  background-color: #F8FAF9;
}
.choice-btn.selected {
  border-color: #0E8C7F;
  background-color: #E7F6F4;
  color: #0E8C7F;
  font-weight: 700;
}
.choice-btn.correct-choice {
  border-color: #0E8C7F;
  background-color: #E7F6F4;
  color: #0E8C7F;
}
.choice-btn.wrong-choice {
  border-color: #E4572E;
  background-color: #FDEEEA;
  color: #E4572E;
}

/* منزلقات تحكم واضحة وجميلة */
input[type="range"] {
  accent-color: var(--color-teal);
  height: 8px;
  border-radius: 4px;
}

/* تحسين شريط التمرير */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* حركات خفيفة وممتعة لمساعد المختبر */
@keyframes eyeBlink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.1); }
}
.mascot-eye {
  transform-origin: center;
  animation: eyeBlink 4s infinite;
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.mascot-float {
  animation: floatGentle 3s ease-in-out infinite;
}

@keyframes bounceWin {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}
.mascot-win {
  animation: bounceWin 0.6s ease-in-out 3;
}