/* Games Styling */
.game-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);

}

.game-instructions {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

/* Matching Game */
.matching-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.matching-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.matching-item {
  background: #f0f7ff;
  border: 2px solid #b3e5fc;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matching-item:hover {
  background: #e1f5fe;
  transform: scale(1.02);
}

.matching-item.selected {
  border-color: var(--color-primary);
  background: #bbdefb;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.4);
}

.matching-item.matched {
  background: #e8f5e9;
  border-color: var(--color-accent-green);
  color: var(--color-success);
  cursor: default;
}

/* Sorting Game */
.sorting-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.sorting-items-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  background: #fafafa;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  min-height: 80px;
}

.sorting-item {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: 600;
  cursor: grab;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease;
}

.sorting-item.selected {
  background: var(--color-accent-yellow);
}

.sorting-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.sorting-category {
  background: #f5f5f5;
  border: 2px dashed #bdbdbd;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sorting-category-title {
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
}

/* Sequence Game */
.sequence-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sequence-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sequence-item {
  background: #fff8e1;
  border: 2px solid #ffe082;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sequence-controls {
  display: flex;
  gap: var(--spacing-xs);
}

.btn-seq-move {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-weight: bold;
}

.btn-seq-move:hover {
  background: #eee;
}

/* Quiz */
.quiz-question {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.quiz-option-btn {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: 1.1rem;
  text-align: left;
  transition: all var(--transition-fast);
}

.quiz-option-btn:hover {
  background: #e2e6ea;
  border-color: #dae0e5;
}

.quiz-option-btn.correct {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.quiz-option-btn.incorrect {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.quiz-feedback {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: #e8f4fd;
  color: #0c5460;
  border: 1px solid #bee5eb;
}