/* ========== SUBJECT PAGE BASE ========== */
.subject-page {
  background: linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  padding: 2rem;
}

/* ========== SLIDE CONTAINER (Same as home page) ========== */
.slide-container {
  position: relative;
  width: 100%;
  max-width: 1400px; /* Match home page */
  margin: 20px auto; /* Center it */
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.slide-container iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960/540; /* true size of the Google Slides artwork (16:9) */
  /* Keep the slide interactive: the YouTube videos and links Alli's mom embedded
     in each room must stay clickable. Overlay divs above it handle their own areas. */
}

/* Responsive — keep the ratio identical at every width so the overlays,
   which are percentages of this frame, never drift off their objects. */
@media (max-width: 768px) {
  .slide-container iframe {
    aspect-ratio: 960/540;
    height: auto;
  }
}


/* ========== CONTENT BLOCKS (Full Width) ========== */
.subject-page .motivational-quote,
.subject-page .fun-fact-box,
.subject-page .stats-box,
.subject-page .topic-card {
  max-width: none;
  margin: 20px 30px;
  border-radius: 20px;
} 
.reward-banner {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  padding: 15px 25px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  animation: pulse 2s infinite;
  margin: 20px auto; /* Center it */
  max-width: 1100px; /* Match home page */
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.reward-banner h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.reward-banner p {
  margin: 0;
  font-size: 1.1rem;
}

.topic-card {
  background: white;
  border-radius: 20px;
  padding: 25px;
  border-left: 15px solid #667eea;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.topic-card h3 {
  color: #667eea;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.quiz {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  padding: 20px;
  border-radius: 24px;
  margin-top: 15px;
}

.quiz p {
  margin: 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ========== ENGAGING CONTENT ========== */
.fun-fact-box {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-left: 8px solid #ff6b6b;
}

.fun-fact-box h4 {
  color: #ff6b6b;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.fun-fact-box p {
  font-size: 1.1rem;
  line-height: 1.6;
}

.motivational-quote {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  font-style: italic;
  font-size: 1.2rem;
}

.motivational-quote:before {
  content: "💭 ";
  font-size: 2rem;
}

.motivational-quote:after {
  content: " ✨";
  font-size: 2rem;
}

.stats-box {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stats-box h4 {
  margin-bottom: 15px;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.stat-item {
  background: rgba(255,255,255,0.3);
  padding: 10px 15px;
  border-radius: 12px;
  margin: 8px 0;
  font-weight: bold;
}

/* ========== SUBJECT ACCENT COLORS ========== */
.math-page .topic-card { border-left-color: #667eea; }
.ela-page .topic-card { border-left-color: #f093fb; }
.science-page .topic-card { border-left-color: #4ecdc4; }
.social-page .topic-card { border-left-color: #ffe66d; }
.assessment-page .topic-card { border-left-color: #ff6b6b; }
.gym-page .topic-card { border-left-color: #4ecdc4; }
.spanish-page .topic-card { border-left-color: #9c27b0; }
.art-page .topic-card { border-left-color: #ff6b6b; }

/* ========== ACTIVITY LOGGING ========== */
.activity-log {
  background: #e8f5e9;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-log .check {
  background: #4ecdc4;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}