Food Chains
ACT: {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #f59e0b;
border-radius: var(--radius-lg);
padding: var(--space-5);
margin: var(--space-5) 0;
}
.fun-fact h4 {
color: #b45309;
margin-bottom: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Matching Game */
.matching-game {
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-6) 0;
}
.matching-game h4 {
color: #4338ca;
margin-bottom: var(--space-4);
text-align: center;
}
.match-columns {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-4);
align-items: start;
}
.match-column {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.match-item {
padding: var(--space-3);
background: white;
border: 2px solid #cbd5e1;
border-radius: var(--radius-md);
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.match-item:hover {
border-color: #6366f1;
background: #eef2ff;
}
.match-item.selected {
border-color: #6366f1;
background: #eef2ff;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.match-item.matched {
border-color: #22c55e;
background: #dcfce7;
cursor: default;
}
.match-divider {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-3);
color: #9ca3af;
font-size: var(--text-2xl);
}
@media (max-width: 640px) {
.match-columns {
grid-template-columns: 1fr;
}
.match-divider {
flex-direction: row;
padding: var(--space-2) 0;
}
.chain-visual {
font-size: var(--text-lg);
}
.chain-item .emoji {
font-size: 1.8rem;
}
}