.hint { text-align: center; color: #64748B; margin-bottom: 1rem; }
.order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; max-width: 280px; }
.order-cell { aspect-ratio: 1; border: none; border-radius: 16px; background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #fff; font-family: var(--font-display, Fredoka, sans-serif); font-size: 1.75rem; font-weight: 700; cursor: pointer; min-height: 80px; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); transition: opacity 0.2s, transform 0.15s; }
.order-cell.done { opacity: 0.25; transform: scale(0.9); pointer-events: none; }
.order-cell.wrong { background: #EF4444; animation: shake 0.3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-8px)} }